Question

我以这种方式在父组件中创建我的组件：

renderRow(row){
  var Buttons = new Array(this.props.w)
  for (var i = 0; i < this.props.w; i++) {
    var thisButton=<FieldButton handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>
    Buttons.push(thisButton)
  }
  return Buttons
}

renderField(){
  var Field = new Array(this.props.h);
  for (var i = 0; i < this.props.h; i++) {
    var row = this.renderRow(i);
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>);
  }
  this.setState({field: Field})
}

目标：

我必须更改FieldButton组件的状态。

我的问题：

更改Childs组件状态的正确方法是什么？

首次尝试：

我试图将prop绑定到父组件的状态：

 <FieldButton color={this.state.color} handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>

我还实现了componentWillReceiveProps方法，但从未调用它。

我试图将孩子移到for循环之外，但它确实有效。

第二次尝试：

我尝试使用refs：this question.

Answer 1

您的案件中的问题似乎是由于关闭造成的。您应该使用let作为for循环，否则每次forLoop都会使用this.renderRow(i)调用this.props.h.length - 1并在您的renderRow案例中使用类似内容

renderRow(row){
  var Buttons = new Array(this.props.w)
  for (let i = 0; i < this.props.w; i++) {
    let thisButton=<FieldButton handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>
    Buttons.push(thisButton)
  }
  return Buttons
}

renderField(){
  var Field = new Array(this.props.h);
  for (let i = 0; i < this.props.h; i++) {
    let row = this.renderRow(i);
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>);
  }
  this.setState({field: Field})
}

此后，您的父组件已经保持状态，您可以将其作为道具传递，然后实现componentWillReceiveProps。

P.S。但是，如果您的子组件状态可以直接派生自道具，你应该直接使用道具而不是保持本地孩子的状态

将onClick事件的数据传递给循环中的函数

1 个答案: