在 React 中兄弟姐妹之间进行交流

Question

我正在尝试创建可重用的时间栏，它接受

date

作为道具并返回两个日期，

left

和

right

（例如上限或下限日期......其中可能有更多逻辑）。

我正在尝试找出向消费者传达此信息的最佳方式，消费者可以关联其他组件（图表等），这些组件将接受

left

和

right

日期以与时间栏同步。

Parent（将日期传递给 Child1，接收日期并将其传递给 Child2）

-> Child1 （Child1 将是我创建的时间栏，根据传入的 prop 日期生成 LEFT 和 RIGHT 日期）

-> Child2（这需要 Child1 的 LEFT 和 RIGHT 日期）

我看了2个选项：

回拨路线： 父级传递一个日期和一个回调来更新其左侧和右侧的状态。然后它使用这个左、右日期来绘制需要的图表。

http://jsbin.com/jikoya/edit?js,控制台,输出

或

将 ES6 类与逻辑分开 这需要父级实例化此类，并且它将返回可供使用的增强型左、右日期。然后将其添加到状态并让它流向所有组件。

constructor(props) {
    super(props);
    this.timebar = new Timebar(new Date('01-16-2016'))
    this.state = {
      leftDate: this.timebar.leftDate,
      rightDate: this.timebar.rightDate
    }
  }
render(){
   return(
          <timebarObj={this.timebarObj} />
          <graph leftDate={this.state.leftDate} rightDate={this.state.rightDate}/>
   )
}

使用这个单独的类方法会有什么缺点，它会是反模式吗？我看到的好处是，通过发送整个实例，我可以在道具中传递更多内容。

Answer 1

您真正谈论的是受控组件与非受控组件...... https://reactjs.org/docs/forms.html#control-components

如果孩子想要独立于其容器来跟踪自己的状态，那么它应该是不受控制的。如果父级需要了解子级的状态，则其状态应该仅来自父级（您的第二个示例）

除了第二个示例之外的另一个选项是使用“渲染道具”：

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      leftDate: "",
      rightDate: ""
    }
    this.calcDates = this.calcDates.bind(this)
  }

  componentDidMount(){
    this.calcDates(this.props);
  }

  componentWillReceiveProps(nextProps){
   if (nextProps.origDate !== this.props.origDate) {
      this.calcDates(nextProps)
    }
  }

  calcDates = (nextProps) => {
    console.log("Child: calcDates", nextProps)
    const lf = nextProps.origDate + " left date";
    const rt = nextProps.origDate + " right date";
    this.setState({leftDate: lf, rightDate: rt}, this.sendToParent)
  }


  render() {
    return this.props.children(this.state)
  }
}

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child>
        { state => (
            JSX that relies on state from child...
          )
        }
        </Child>
      </div>
    )
  }
}