Question

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

我正在尝试找出与消费者沟通的最佳方式，消费者可以关联其他组件（图表等），这些组件将接受left和right日期与时间栏同步

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

- ＆GT; Child1 （Child1将是我创建的时间栏，根据传入的道具日期生成LEFT和RIGHT日期）

- ＆GT; Child2 （这需要来自Child1的LEFT和RIGHT日期）

我看了两个选项：

回拨路线： 父传递日期和回调以更新其左右状态。然后它使用这个需要它的图表的左，右日期。

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

OR

将ES6类与逻辑分开 这将要求父实例化此类，它将返回增强的左，右日期准备使用。然后将其添加到state并让它流向所有组件。

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

在React中的兄弟姐妹之间进行沟通

1 个答案: