1

我正在尝试创建可重用的时间栏，它接受 adate作为道具并返回两个日期，left并且right（例如 ceil 或 floor 日期......其中可能有更多逻辑）。

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

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

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

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

我查看了 2 个选项：

回调路由： 父级传递一个日期和一个回调来更新其左右的状态。然后它将这个左右日期用于需要它的图表。

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

或者

使用逻辑分离 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}/>
   )
}

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

4

1 回答 1

2

您真正在谈论的是受控组件与不受控组件... 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>
    )
  }
}
于 2017-11-01T23:31:05.250 回答