React:创建同一控件的另一个实例

时间:2016-02-16 06:20:26

标签: reactjs redux

我创建了一个运行良好的应用程序。我的app.jsx看起来像

const App = () => (
    <div>
        <DimensionPicker dimensionName="genre"/>
        <TableControl />
    </div>
)

export default App;

好。这很好。但是现在我想在同一个报告上找到另一个维度选择器实例,比如

const App = () => (
    <div>
        <DimensionPicker dimensionName="genre"/>
        <DimensionPicker dimensionName="year"/>
        <TableControl />
    </div>
)

export default App;

事实证明这很难做到,因为第二个实例将覆盖我在商店中创建的状态。

如何解决这种情况?

1 个答案:

答案 0 :(得分:1)

所以我认为这里的问题是两个实例都具有相同的业务逻辑,因为一切都在内部处理。因此,两者都会覆盖商店中的相同状态,导致两个实例都触发相同的回调。

我做什么,当我想要一个演示组件具有不同的功能时,只需将它们包装起来并将所需的回调作为道具注入。

我会这样做(伪代码):

GenrePicker extends Component {
    handleBehaviour() {
      // define GenrePicker specific logic here
      dispatch(STATE_CHANGE_GENREPICKER)
    }        

    render() {
     return (<DimensionPicker onPickHandler={this.handleBehaviour} dimensionName="genre"/>)
    }
}

YearPicker extends Component {
   handleBehaviour() {
      // define YearPicker specific logic here
      dispatch(STATE_CHANGE_YEARPICKER)
   }        

   render() {
      return (<DimensionPicker onPickHandler={this.handleBehaviour} dimensionName="year"/>)
   }
}

并在您的应用中

const App = () => (
    <div>
        <GenrePicker />
        <YearPicker />
        <TableControl />
    </div>
)

export default App;

我总是只使用道具来编程我的演示组件。在你的情况下,我会将DimensionPicker视为一个哑的表示组件,并使用具体的组件来注入所需的逻辑。

关于状态覆盖的问题。两个组件都不应该拥有自己的状态属性吗? state = {selectedYear:'',selectedGenre:''}因此在他们的handleBehaviour()方法中调度一个只传播它自己的状态变化的动作?