Redux+React 管理两个（或更多）相同元素的状态。如何？

Question

大家好）我不明白如何管理两个完全相同的元素（例如，datepicker- "start date" 和 "end date"）的状态 (open/closed)。现在我做了两个动作 CHANGE_STATE1 和 CHANGE_STATE2，但是当我看到这段代码时我会感到沮丧。还有一些例子可以更好地理解：第一个弹出窗口及其状态：

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

第二个弹出框：

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

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

Answer 1

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

您的动作创建者看起来像：

setDate(edge, date)

你的 React class 可能有这样的方法：

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

你可以像

一样在渲染方法中绑定

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 作为属性的新组件。

Redux+React 管理两个（或更多）相同元素的状态。如何？

Redux+React manage state of two (or more) same elements. How?

javascript

reactjs

redux