首页 文章

两个子组件之间的接线

提问于
浏览 次
1

我正在学习React，我有一个特定的例子，试图通过一个接口连接两个组件 . 我已经阅读了大部分父/子，子/父和兄弟组件通信stackoverflow相关的问题，似乎无法找到正确的答案 .

假设我有一个App组件，可以呈现Box和Mover组件 . 很简单，Box有一个move（x，y）函数，我想让Mover接口 . 但是，Mover不一定是Box（或任何其他关系）的孩子 - 具体来说，我不希望Box将自己的方法传递给Mover .

我想在App中做什么，是这样的：

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

但是，你不能在文档中明确指出的render（）中使用refs，并且框架refs在安装之前不会被定义（因此盒子道具不起作用） .

我曾想过使用一个中间对象：

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

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

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

javascript reactjs

1 回答

  • 2

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

    例如如果呈现 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() 方法（取决于它的作用），但可以在其 render() 方法中使用道具（当道具改变时会自动重新渲染），或者您可以通过使用 componentWillReceiveProps() 方法检测更改来对 x 和 y 值进行更改：

    // within render()
<Box x={this.state.x} y={this.state.y}/>

// within Box
componentWillReceiveProps: function(nextProps) {
  if (nextProps.x !== this.props.x || nextProps.y !== this.props.y) {
    // ...
  }
}
    回复于

相关问题