样式化组件不更新<div>重新渲染后</div><div id="text_translate"><p>我有一个基于 switch 语句呈现的反应组件。 我正在更新开关基于的 state，但它没有</p><pre>switch (condition) { case Condition1: default: return ( &lt;Condition1Component /&gt; ); case Condition2: return ( &lt;Condition2Component /&gt; ); case Condition3: return ( &lt;Condition3Component /&gt; ); }</pre><p> 所有三个组件都被包装在自己的样式中div 。</p><p> 当我 go 从默认 state 到Condition3时， Condition3组件被包裹在Condition1 styled div周围，这很奇怪。</p><p> 当我将我的默认 state 更改为Condition3时，一切都按预期工作。</p></div>

Question

I have a react component which renders based on a switch statement. I am updating the state in which the switch is based out of and it does not

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

All three components are being wrapped in its own styled div .

When I go from default state to Condition3 , The Condition3 component is being wrapped around the Condition1 styled div which is strange.

When I change my default state to Condition3 then everything works as supposed to.

Answer 1

See if this works for you.

 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"/>