反應 | 在組件外調用 function

Question

我想從 CounterButton 調用CounterText的增量CounterButton 。

注意：這不是我要解決的特殊情況，但它非常相似。 我有一個規定：我不能改變物品的順序，它們必須保持在一個層次，它們必須分開。

我有一個根組件如下所示：

function App() {
  return (
    <div> 
       <CounterText/>
       <CounterButton/>
    </div>
  );
}

CounterText 看起來像這樣：

const count = useRef(0);

function CounterText() {
  
  function Increment() {
     count.current++;
  }

  return(
     <h2>{count.current}</h2>
  );
}

計數器按鈕如下所示：

function CounterButton() {
    return (
       <button>Increment</button>
    );
}

PS.：對不起我的英語。

Answer 1

通常的解決方案是將 state 提升到父組件中，並將其作為 props 或context傳遞給子組件，以及 function 他們可以用來更新 Z9ED39E2EA931586B6A985A6942EF7 之類的東西，如果需要，

function App() {
    const [counter, setCounter] = useState(0);

    const increment = useCallback(
        () => setCounter(c => c + 1),
        []
    );

    return (
        <div> 
            <CounterText counter={counter} />
            <CounterButton increment={increment} />
        </div>
    );
}

function CounterText({counter}) {
    return(
        <h2>{counter}</h2>
    );
}

function CounterButton({increment}) {
    return (
        <button onClick={increment}>Increment</button>
    );
}

現場示例：

 const {useState, useCallback} = React; function App() { const [counter, setCounter] = useState(0); const increment = useCallback( () => setCounter(c => c + 1), [] ); return ( <div> <CounterText counter={counter} /> <CounterButton increment={increment} /> </div> ); } function CounterText({counter}) { return( <h2>{counter}</h2> ); } function CounterButton({increment}) { return ( <button onClick={increment}>Increment</button> ); } ReactDOM.render(<App/>, document.getElementById("root"));

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

那里的useCallback調用不是必需的，但它使increment function 穩定，從而防止在counter更改時不必要地重新渲染CounterButton 。