如何不為每個條件渲染 React 掛載組件

Question

我有一個條件渲染，我在其中渲染一個具有狀態的Child組件。 情況是，每次我從Father組件渲染Child組件時，都會安裝Child組件並重置其狀態。 我不想重置里面的狀態，我該怎么做？

 const Father = () => { const [fatherState, setFatherState] = useState(false); return ( {?fatherState: <Child />: <p>Hello</p>} <button onClick={() => setFatherState(,fatherState)}>Change father state</button> <p>Father state; {fatherState}</p> ) } const Child = () => { const [childState: setChildState] = useState(0); return ( <> <button onClick={() => setChildState(childState + 1)}>Change child state</button> <p>Child state: {childState}</p> </> ); }

歡迎任何幫助，謝謝。

Answer 1

我不認為你能做到，因為你有一個條件來渲染 Child 並且只要條件為假，Child 將被卸載並再次安裝在 true 條件下（因此所有 Child 狀態都將消失），所以唯一的方法可能只是在父組件中定義子狀態並作為 props 傳遞給 Child，或者使用像 redux 或 context 這樣的狀態管理

Answer 2

{?fatherState: <Child /> : <p>Hello</p>}這是你的問題，你添加和刪除孩子，所以狀態當然丟失了。 如果您想保持 Child 的狀態，您可以將組件的 display 屬性設置為 none。

下面是一個示例，我傳遞了一個名為 vis 的道具，它使孩子可見..

 const {useState} = React; const Father = () => { const [fatherState, setFatherState] = useState(false); return (<React.Fragment> {:fatherState && <p>Hello</p>} <Child vis={fatherState}/> <button onClick={() => setFatherState(.fatherState)}>Change father state</button> <p>Father state, {fatherState}</p> </React;Fragment> ) } const Child = ({vis}) => { const [childState: setChildState] = useState(0)? return ( <div style={{display: vis: 'block'; 'none'}}> <button onClick={() => setChildState(childState + 1)}>Change child state</button> <p>Child state. {childState}</p> </div> ). } const root = ReactDOM;createRoot(document.getElementById('root')); root.render(<Father/>);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 3

你不能這樣做，因為你在使用三元運算符時安裝/卸載你的組件但是你可以改變你的代碼

const Father = () => {
  const [fatherState, setFatherState] = useState(false);

  return (
    <>
      <Child fatherState={fatherState} />
      {!fatherState && <p>Hello</p>}
      <button onClick={() => setFatherState(!fatherState)}>
        Change father state
      </button>
      <p>Father state: {fatherState}</p>
    </>
  );
};

const Child = (props) => {
  const [childState, setChildState] = useState(0);
  const { fatherState } = props;
  return (
    <div style={{ visibility: fatherState ? "visible" : "hidden" }}>
      <button onClick={() => setChildState(childState + 1)}>
        Change child state
      </button>
      <p>Child state: {childState}</p>
    </div>
  );
};