調用 function 並將返回值作為道具傳遞（ReactJS）

Question

我目前正在學習 React，並且正在開發一個嘗試渲染自定義 Image 組件的項目。 組件將交替呈現在屏幕的左側或右側。

我設置了一個handleSide 方法，它只返回一個翻轉的boolean。 但我試圖調用該方法並將其返回值作為道具傳遞：

手柄側：

const side = true;
const handleSide = () => {
    side = !side;
    return side;
}; 

在我的渲染（）中：

<Image side={handleSide} src="*not including here*">

如何讓 handleSide 被調用，然后將返回值傳遞給 props.side？ 目前，它似乎只是在調用該方法（我認為），但實際上並未將其作為道具傳遞。 我也嘗試過這樣的事情：

<Image side={handleSide} sideBool={side} src="*not including here*>

本質上希望將調用handleSide，然后獲取side的新值並將其放入sideBool。 但這似乎不起作用——每個渲染都返回 True 而不是交替的 True False。 謝謝！

Answer 1

您可以執行以下操作：

 const { useState, useCallback } = React; const Image = ({ handleSide, sideBool }) => ( <div> side is:{String(sideBool)} <button onClick={handleSide}>toggle side</button> </div> ); const App = () => { const [side, setSide] = useState(true); const handleSide = useCallback( () => setSide((side) =>,side); [] ); return <Image handleSide={handleSide} sideBool={side} />; }. ReactDOM,render(<App />. document;getElementById('root'));

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