Стилизованный компонент не обновляет <div>после повторного рендеринга

Question

У меня есть компонент реагирования, который рендерится на основе оператора switch.Я обновляю состояние, в котором основан коммутатор, и он не

switch (condition) {
    case Condition1:
    default:
      return (
        <Condition1Component />
      );
    case Condition2:
      return (
        <Condition2Component />
      );
    case Condition3:
      return (
        <Condition3Component />
      );
  }

Все три компонента упакованы в его собственный стиль div.

Когда я выхожу изсостояние по умолчанию Condition3, компонент Condition3 оборачивается вокруг Condition1 styled div, что странно.

Когда я изменяю свое состояние по умолчанию на Condition3, тогда все работает как положено.

Answer 1

Посмотрите, работает ли это для вас.

const Container1_DIV = window.styled.div`
  color: red;
`;

const Container2_DIV = window.styled.div`
  color: blue;
`;

const Container3_DIV = window.styled.div`
  color: green;
`;

const Default_DIV = window.styled.div`
  color: black;
`;

function App() {
  
  const [myState,setMyState] = React.useState(1);
  
  switch(myState) {
    case 1:
      return (
        <React.Fragment>
          <Container1_DIV>I am Container 1</Container1_DIV>
          <button onClick={()=>setMyState(1)}>Select 1</button>
          <button onClick={()=>setMyState(2)}>Select 2</button>
          <button onClick={()=>setMyState(3)}>Select 3</button>
          <button onClick={()=>setMyState(4)}>Select 4</button>
        </React.Fragment>
      );
    case 2:
      return (
        <React.Fragment>
          <Container2_DIV>I am Container 2</Container2_DIV>
          <button onClick={()=>setMyState(1)}>Select 1</button>
          <button onClick={()=>setMyState(2)}>Select 2</button>
          <button onClick={()=>setMyState(3)}>Select 3</button>
          <button onClick={()=>setMyState(4)}>Select 4</button>
        </React.Fragment>
      );
    case 3:
      return (
        <React.Fragment>
          <Container3_DIV>I am Container 3</Container3_DIV>
          <button onClick={()=>setMyState(1)}>Select 1</button>
          <button onClick={()=>setMyState(2)}>Select 2</button>
          <button onClick={()=>setMyState(3)}>Select 3</button>
          <button onClick={()=>setMyState(4)}>Select 4</button>
        </React.Fragment>
      );
    default:
      return (
        <React.Fragment>
          <Default_DIV>I am Default DIV</Default_DIV>
          <button onClick={()=>setMyState(1)}>Select 1</button>
          <button onClick={()=>setMyState(2)}>Select 2</button>
          <button onClick={()=>setMyState(3)}>Select 3</button>
          <button onClick={()=>setMyState(4)}>Select 4</button>
        </React.Fragment>
      );
  }
  
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"/>