javascript - Redux+React 管理两个(或多个)相同元素的状态。如何？

Question

大家好)我不明白如何管理两个完全相同的元素的状态(打开/关闭)(例如，日期选择器-“开始日期”和“结束日期”)。现在我做了两个操作 CHANGE_STATE1 和 CHANGE_STATE2，但是当我查看这段代码时，我会感到沮丧。 为了更好地理解一些例子: 第一个弹出窗口及其状态:

<Popover open={this.props.isOpenPopoverLeft}>

第二个弹出窗口:

<Popover open={this.props.isOpenPopoverRight}>

如您所见，元素完全相同，但状态不同。 如何正确地编写漂亮的代码？

Answer 1

我有这个确切的情况(开始和结束选择器)，并使用 edge 参数解决它，引用两个常量，START 和 END.

您的 Action 创建器如下所示:

setDate(edge, date)

你的 React 类可能有这样的方法:

_onSelectDate(edge, date) {
  dispatch(setDate(edge, date));
}

并且您可以在渲染方法中绑定(bind)，例如

render() {
    // holds the state in an object like { start: true, end: false }
    const popoverState = this.props.popoverState;

    return (
      <div>

        <Popover open={ popoverState[START] }>
            <DatePicker
              onChange={ this._onSelectDate.bind(this, START) }/>
        </Popover>

        <Popover open={ popoverState[END] }>
            <DatePicker
              onChange={ this._onSelectDate.bind(this, END) }/>
        </Popover>

      </div>
    );

}

根据布局的相似程度，您还可以映射像 [START, END] 这样的数组，或者使用一个将 edge 作为 prop 的新组件.