gpt4 book ai didi

javascript - 在连接到状态不同部分的不同路由上重用 react/redux 组件

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:31:28 25 4
gpt4 key购买 nike

我遇到了一个问题,因为我有一个相当复杂的组件来呈现项目列表。项目列表直接取自 redux 状态树。我想要有 2 个独立的路由来重用同一个组件,但它们中的每一个都将连接到来自状态树的不同列表。

这是一个简化的例子:

从状态树开始:

state = {
fruits: ['apple', 'banana', 'grape', 'pear'],
vegetables: ['celery', 'carrot', 'cucumber']
}

和一个简单的列表组件

class ListView extends Component {
render() {
return (
<div>
{this.props.items.map((item, index) =>
<div key={index}>{item}</div>
)}
</div>
)
}
}

function mapStateToProps(state) {
return {
items: state.fruits
}
}

export default connect(mapStateToProps)(ListView)

更高级别的 App 组件如下所示:

class App extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}

export default connect()(App)

路线看起来像这样:

  <Route path='/' component={App}>
<IndexRedirect to='fruits' />
<Route path='fruits' component={ListView} />
<Route path='vegetables' component={ListView} />
</Route>

所以现在 ListView 组件连接到 redux 状态的 fruits 部分。但是,我想在这里使用路由结构,因此“/fruits”和“/vegetables”都将使用相同的组件,但“/fruits”将列出水果,而“/vegetables”将列出蔬菜。

显而易见的解决方法是创建一个全新且相同的组件类,并更改 mapStateToProps 方法以连接到蔬菜数组。

有没有办法重用这个组件,但每个组件都可以访问状态树的不同部分?

最佳答案

从您的 ListView 中,您可以将 FruitsList 和 VeggiesList 作为单独的组件导出,然后根据路线显示正确的组件。

class ListView extends Component {
render() {
return (
<div>
{this.props.items.map((item, index) =>
<div key={index}>{item}</div>
)}
</div>
)
}
}

function mapStateToPropsVeggies(state) {
return {
items: state.veggies
}
}

function mapStateToPropsFruits(state) {
return {
items: state.fruits
}
}

const VeggiesList = connect(mapStateToPropsVeggies)(ListView);
const FruitsList = connect(mapStateToPropsFruits)(ListView);

export default ListView;
export {
VeggiesList,
FruitsList
};

然后将路由器更新为:

<Route path='/' component={App}>
<IndexRedirect to='fruits' />
<Route path='fruits' component={FruitsList} />
<Route path='vegetables' component={VeggiesList} />
</Route>

关于javascript - 在连接到状态不同部分的不同路由上重用 react/redux 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37583217/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com