Блог

В настоящее время я изучаю React и работаю над проектом, в котором я пытаюсь отобразить пользовательский компонент изображения. Компонент должен отображаться поочередно в левой или правой части экрана.

Я настроил метод handleSide, который просто возвращает перевернутое логическое значение. Но я пытаюсь вызвать этот метод и передать его возвращаемое значение в качестве prop:

Обработка:

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

В моем render():

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

Как я могу вызвать handleSide, а затем передать возвращаемое значение для props.side? В настоящее время кажется, что он просто вызывает метод (я думаю), но на самом деле не передает его как prop. Я также пробовал что-то вроде этого:

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

По сути, надеясь, что будет вызван handleSide, а затем принять новое значение стороны и поместить его в sideBool. Но, похоже, это не сработало — каждый рендеринг возвращал True, а не изменял True False . Спасибо!

Вы могли бы сделать следующее:

 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>