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的值时，它返回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中引用拥有代码的对象，内部呈现方法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。

建议：代替this.props.datarows[key]您也可以使用data，因为data和this.props.datarows[key]会相同。

如何在反应js中访问此变量？

2 个答案: