如何根据条件更改容器组件以避免重复其内容

render() {
  return (
    <div>
      {this.state.condition ? <ComponentA /> : <ComponentB />}
    </div>
  );
}

function withConditionalRendering(WrappedComponent) {
  return class extends React.Component {
    render() {
      if (this.props.condition) {
        return <ComponentA />;
      } else {
        return <ComponentB />;
      }
    }
  };
}

const ConditionalComponent = withConditionalRendering(Component);

// Redux示例
const initialState = {
  condition: false
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_CONDITION':
      return { ...state, condition: action.payload };
    default:
      return state;
  }
}

function App() {
  const condition = useSelector(state => state.condition);

  return (
    <div>
      {condition ? <ComponentA /> : <ComponentB />}
    </div>
  );
}