时间戳

首页 > 解决方案 > React Component：更新组件，基于另一个没有关系的组件

reactjs - React Component：更新组件，基于另一个没有关系的组件

问题描述

我不知道标题是否清楚，这是我目前面临的问题。我的经验很少。的反应，非常感谢帮助

我有一个基于类别的产品列表，类别已定义，A、B 和 C

我为所有类别创建了单独的组件，因此 Acomponent 列出 A 下的所有产品。 Bcomponent 列出 B 下的所有产品，依此类推。将它们分开是因为它们具有不同的功能。它们都显示在单个页面上，并由单个父组件调用

render(){
<div>
    <Acomponent />
    <Bcomponent />
    <Ccomponent />
</div>
}

我在列表中的所有产品前面都有一个选择框，用户可以从中更新产品的类别。因此 B 中的产品将具有带有选项 A 和 C 的选择框。

问题是我可以更新当前产品的组件，当产品类别更新时，它会从当前类别组件列表中删除它，但我需要更新它被移动到的组件。

我怎样才能做到这一点？

标签： reactjscomponents

解决方案

我一直按照@Emil 和@Andrew 的建议使用redux 来解决这个问题。请让我知道我所做的是否正确！

在所有类别组件中，我添加了以下内容

const mapStateToProps = state => ({
  dispatchedValue: state.dispatchComponent
});

const mapDispatchToProps = dispatch => ({
  triggerComponent: (compName) => dispatch(triggerComponent(compName))
});

export default connect(mapStateToProps, mapDispatchToProps)(Acomponent);

在选择值更改时，我调度要更新的组件名称，如下所示 

handleSelectChange(value){
    // UPDATE CURRENT LIST
    ...............

    // GETTING COMPONENET NAME USING VALUE
    let component = this.mapComponenet(value)

    // UPDATE OTHER COMPONENET
    this.props.triggerComponent(component);
}

然后用于componentDidUpdate触发其他组件上的 API 调用

componentDidUpdate(prevProps, prevState) {
    if(this.props.dispatchedValue == this.state.componentName){
      // UPDATE COMPONENET CODE
    }
}

让我知道是否存在与它相关的一些问题，或者它不应该用于这样的说法，缺点和东西。

推荐阅读