Question

我创建了一个运行良好的应用程序。我的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;

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

如何解决这种情况？

Answer 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（）方法中调度一个只传播它自己的状态变化的动作？

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

1 个答案: