Question

我正在学习React，我有一个尝试通过接口连接两个组件的具体示例。我已经阅读了大部分父/子，子/父和兄弟组件通信stackoverflow相关的问题，似乎找不到合适的答案。

假设我有一个呈现Box和Mover组件的App组件。很简单，Box有一个移动（x，y）功能，我喜欢Mover接口。但是，Mover并不一定是Box（或任何其他关系）的孩子 - 具体来说，我不希望Box将自己的方法传递给Mover。

我想在应用中做的事情是这样的：

...
render: function() {
    return (
        <Box ref="box"/>
        <Mover box = {this.refs.box} />
    )
}
....

但是，您无法在文档中明确指出的渲染（）中使用引用，并且框架引用无论如何都没有定义，直到它被安装（因此框架道具赢了＆＃39;工作）。

我想过使用中间对象：

...
render: function() {
    var api = {box: undefined};
    return (
        <Box api={api}/>
        <Mover api={api} />
    )
}
....

Where Box在其componentDidMount方法中设置了this.props.api，但这有点不确定。另一种选择是使用App中的refs回调来进行连线，但这需要丑陋的胶水代码。

在渲染时，是否还有其他方法可以在彼此之间传递对（但未创建的）组件的引用？还是有一些我不遵守的更一般的设计原则？

Answer 1

对于兄弟姐妹，你通常需要将他们需要引用的任何状态移动到一个共同的父组件中并将其作为道具传递（或侧向传递到外部存储对象 - 请参阅react-training＆＃39; s {{3示例课程）并将其作为道具传递给它们。

e.g。如果呈现Box和Mover的组件具有以下状态：

getInitialState: function() {
  return {
    x: 0,
    y: 0
  }
}

然后你可以传递Mover一个更新它的回调函数：

handleMove: function(x, y) {
  this.setState({x: x, y: y})
}

// within render() - you could also pass x and y if Mover needs them
<Mover onMove={this.handleMove}/>

// within Mover
this.props.onMove(newX, newY)

如果您将此状态作为道具传递给Box，则不一定需要明确的move()方法（取决于它的作用），但可以使用其{{}中的道具1}}方法（当道具改变时会自动重新渲染），或者您可以通过使用render()方法检测更改来对x和y值进行更改做出反应：< / p>

componentWillReceiveProps()

两个子组件之间的接线

1 个答案: