Question

大家好）我无法理解如何管理两个完全相同的元素的状态（打开/关闭）（例如，datepicker-＆＃34;开始日期＆＃34;和＃34;结束日期＆＃ 34）。现在我做了两个动作CHANGE_STATE1和CHANGE_STATE2，但是当我看到这段代码时，我会感到沮丧。以及一些更好理解的例子：第一个popover和它的状态：

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

第二次弹出：

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

正如您所看到的，元素绝对相同，但具有不同的状态。如何正确的代码？

Answer 1

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

您的动作创建者如下：

setDate(edge, date)

您的React类可能有以下方法：

_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管理两个（或更多）相同元素的状态。怎么样？

1 个答案: