我如何在 React JS 中访问这个变量？

Question

父组件：

render(){
    console.log("here2");
    var temp = [];
    this.props.datarows.forEach((data, key) => {
            temp = this.props.datarows[key]  })
    return(
            <tr>
                <ListColumn col = { this.temp } />
            </tr>
        )
}

ListColumn.py

import React, { Component } from 'react';
import _ from 'lodash';

export default class ListColumn extends Component{

    render(){
        var columns = [];
        console.log("here3")
        console.log(this.props.col);
        // for (var key in this.props.col)
        // {
        //  columns.push(<td>this.props.col[key]</td>)
        // }
        // console.log(columns);
        // return(
        //  columns
        // )
        return(
                <td>a</td>
            )
    }
}

当我尝试打印 this.props.col 的值时，它 returns undefined，如何访问变量 temp？提前致谢。

Answer 1

问题是，temp 声明为 var temp = []; 但你传递 this.temp 变化：<ListColumn col = { this.temp } />

到

<ListColumn col ={temp } />

所以，

render(){
    console.log("here2");
    var temp = [];
    this.props.datarows.forEach((data, key) => {
            temp = this.props.datarows[key]  })//it should be temp.push(data) if you want to pass all datarows as props
    return(
            <tr>
                <ListColumn col = {temp } />
            </tr>
        )
}

2.

 for (var key in this.props.col)
    {
      columns.push(<td>this.props.col[key]</td>)
     }

应该是

 for (var key in this.props.col)
     {
        columns.push(<td key={key}>{this.props.col[key]}</td>)
     }

Answer 2

而不是

<ListColumn col = { this.temp } />

使用

<ListColumn col = {temp } />

原因：在JS中this指的是拥有代码的对象，在render方法中this指的是react组件。如果你使用 this.temp，它不会获取局部变量（在 render 方法中定义），所以不要使用 this.temp 使用 temp（局部变量）。

还有一点，如果你这样使用它：

this.props.datarows.forEach((data, key) => {
         temp = this.props.datarows[key]  })

temp 将具有 this.props.datarows 数组的最后一个值。我想，你想要这样的东西：

this.props.datarows.forEach((data, key) => {
      if(/*use some condition to filter out the value that you want to save in temp array*/){
           temp.push(data);
      }
}

或者如果您想将相同的 array 分配给临时变量，则在这种情况下不需要 looping。

建议：您也可以使用data代替this.props.datarows[key]，因为data和this.props.datarows[key]是一样的.

我如何在 React JS 中访问这个变量？

How do I access this variable in react js?

reactjs

react-jsx