React中兄弟姐妹之间的交流

Question

我正在尝试创建可重复使用的时间栏，它接受 date 作为道具和 return 两个日期，left 和 right（例如 ceil 或地板日期......可能有更多的逻辑）。

我正在尝试找出将此信息传达给可以关联其他组件（图形等）的消费者的最佳方式，这些组件将接受 left 和 right 日期进行同步时间栏。

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

-> Child1（Child1 将是我创建的时间栏，根据传入的道具日期生成左右日期）

-> Child2（这需要来自 Child1 的左右日期）

我查看了 2 个选项：

回调路由： Parent 传递一个日期和一个回调来更新它的 left 和 right 状态。然后它为需要它的图表使用这个左右日期。

http://jsbin.com/jikoya/edit?js,console,output

或

用逻辑分离ES6class 这将需要父实例化此 class 并且它将 return 增强的左、右日期准备好使用。然后将其添加到状态并让它流向所有组件。

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}/>
   )
}

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

Answer 1

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

如果 child 将独立于其容器跟踪其自身状态，则它应该是不受控制的。如果 parent 需要了解 child 的状态，那么它的状态应该来自 parent （你的第二个例子）

除了你的第二个例子之外的另一个选择是使用 "render props":

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>
    )
  }
}

React中兄弟姐妹之间的交流

Communicate between siblings in React

parent-child

siblings

communicate

reactjs