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

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：创建同一控件的另一个实例

React: Creating Another instance of the same control

reactjs

redux