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

Question

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

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

第二个弹出窗口:

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

如您所见，元素完全相同，但具有不同的状态。如何为此编写漂亮的代码？

Answer 1

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

你的 action creator 看起来像:

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 的新组件.