调用 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>