调用函数并将返回值作为道具传递（ReactJS）

Question

我目前正在学习 React，并且正在做一个项目，我正在尝试渲染一个自定义 Image 组件。组件将在屏幕的左侧或右侧交替呈现。

我设置了一个handleSide 方法，它只返回一个翻转的布尔值。但我正在尝试调用该方法并将其返回值作为道具传递：

handleSide：

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>