Question

A (Parent)
    |---- B (Child)
    |---- C (Child)

我正在尝试将数据传递给同级组件（例如从B到C），

首先，在父组件[A]中，我定义了回调函数并将此回调函数传递给子[B]，

handleCallback = (data) => {
    console.log('In parent', datafromChild)
    this.setState.listDataFromChild = data
  }

<LaunchPageButtons ParentCallBack={this.handleCallback} />

在子组件[B]中，我将回调称为

this.props.ParentCallBack('true')

在这里，我能够在父级[A]的回调函数中获取值并更新父级状态。直到现在一切正常

现在我想将相同的数据发送给孩子[C]，所以我将其作为道具从父组件[A]传递给

<ChannelsModularGrid buttonselect={this.state.listDataFromChild} />

在Child [C]中，要测试我是否正在获取数据，我已经检查了其中一个函数，

if (this.props.buttonselect) {
      debugger //eslint-disable-line
      console.log('test')
    }

我根本没有在子组件[C]中获得控件/调试器。请帮助我了解如何在我的情况下将数据从A传递到C

Answer 1

请记住，setState是一个函数。在您父母的回调中，而不是分配给属性setState，而是使用状态的更新切片来调用该函数：

handleCallback = (data) => {
  console.log('In parent', datafromChild)
  this.setState({
    listDataFromChild: data
  })
}

Answer 2

@cubbrr已经回答了这个问题，我只会补充一点，尽管您没有指定代码的上下文，但是如果您没有正确地绑定函数，也会发生错误，因为这可能会设置子组件的状态父母的因此，对于您而言，要么绑定到构造函数中，要么通过将函数作为自动绑定的箭头函数发送：

1）

constructor(props){ super(props); this.handleCallback = this.handleCallback.bind(this) }

...


<LaunchPageButtons ParentCallBack={this.handleCallback} />

OR

2）

<LaunchPageButtons ParentCallBack={(data) => { console.log('In parent', datafromChild); this.setState({listDataFromChild: data}); }} />

您可以在此处阅读有关绑定的更多信息： https://reactjs.org/docs/handling-events.html

在REACT同级组件之间传递数据

2 个答案: