我创建了一个运行良好的应用程序。我的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;
事实证明这很难做到,因为第二个实例将覆盖我在商店中创建的状态。
如何解决这种情况?
答案 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()方法中调度一个只传播它自己的状态变化的动作?