如何在其他组件中激活道具后重新渲染已经渲染的组件

Question

我正在React-native中设置一个应用程序，我有一个：

组件A：具有2个字段的搜索组件

组件B：此页面上的一个按钮，我单击它，出现第3个字段

此组件仅与react-navigation链接

在我的情况下，组件B是我可以购买溢价的组件，我想在购买高级时更新组件A.

问题：当我已经渲染了组件A，然后我转到组件B时，单击按钮，组件A不会重新渲染，我该怎么办？

我在寻找这样的东西：

class ComponentA extends PureComponent {

render() {
    if (userHasNotClickedOnComponentB) {
      return (
        <SearchForm/>
      )
    } else {
        return (
          <SearchFormPremium/>
        )
      }
  }
}

SearchForm和SearchFormPremium是两个独立的组件：一个具有Premium功能，另一个仅供普通用户使用

我已经渲染了ComponentA，然后我转到ComponentB并单击按钮

class ComponentB extends PureComponent {

render() {
    return (
       <Button onClick={() => setPremium()}/>
      )
  }
}

ComponentS如何重新渲染，以便我可以更改Component？

谢谢

Answer 1

您可能希望使用Redux或类似的东西来保留所有组件都可以查看的集中存储。有很多Redux教程，所以我不会详细介绍，但基本上它可以让你：

1）创建可从任何“连接”组件访问的数据存储

2）从任何组件调度操作以更新商店

连接组件时，连接的数据将成为道具。因此，例如，如果将组件A和B连接到商店的同一切片，则当组件A更新它时，组件B将自动重新渲染，因为其道具已更改。

Redux github page

Answer 2

好的，Redux工作了！

只需连接两个组件。在ComponentA（必须自动更新的组件）中，使用函数componentWillReceiveProps（）并在其中刷新它。

在减速机中：

const initialState = {premium: false};

const tooglePremiumReducer = (state = initialState, action) => {
  switch (action.type) {
    case "TOOGLE_PREMIUM":
      return {
        ...state,
        premium: action.payload.premium,
      };
    default:
      return state;
  }
};

export default tooglePremiumReducer;

在行动：

export const tooglePremiumAction = (premium) => {
    return dispatch => {
      dispatch({
        type: "TOOGLE_PREMIUM",
        payload: {
          premium: premium
        }
      });
    };
  };

在ComponentB中：

// Import tooglePremiumAction
class ComponentB extends PureComponent {

render() {
    return (
       <Button onClick={() => this.props.tooglePremiumAction(true)}/>
      )
  }
}

const actions = {
  tooglePremiumAction
};

export default connect(
  actions
)(ComponentB);

在ComponentA中：

class ComponentA extends PureComponent {

componentWillReceiveProps(nextProps) {
    if(this.props.premium !== nextProps.premium) {
      //here refresh your component
    }
  }

render() {
    if (!this.props.premium) {
      return (
        <SearchForm/>
      )
    } else {
        return (
          <SearchFormPremium/>
        )
      }
  }
}

const mapStateToProps = state => {
  const premium = state.premium.premium
  return { premium };
};

export default connect(mapStateToProps)(ComponentA);