@Slav4ka

Как осуществить передачу данных между компонентами React?

Пытаюсь разобраться, как передавать данные между siblings-компонентами. Нужно сделать так, чтоб класс active был только у одного child-компонента (Можно было выделить только один div).
Я пытался реализовать это через хуки, не классы. В результате при клике у выбранного компонента меняются классы, а у его siblings ничего не происходит. Хотя все должно быть синхронно и только один компонент должен быть с классом "active". Как я понимаю, они попросту не перерисовываются. Вопрос такой, как это исправить? И такой подход для реализации заданной цели правильный? Или моя идея в корне не верна, буду благодарен за ответ.

  • Вопрос задан
  • 188 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
const ChildComponent = (props) => (
  <div
    className={`childComponent ${props.isActive ? 'active' : ''}`}
    onClick={props.onClick}
    data-id={props.id}
  >
    <h3>{props.text}</h3>
  </div>
);


const ParentComponent = ({ items }) => {
  const [ active, setActive ] = React.useState(null);

  const onClick = e => setActive(+e.currentTarget.dataset.id);
  // или
  // const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);

  return (
    <div>
      {items.map(n =>
        <ChildComponent
          key={n.id}
          onClick={onClick}
          isActive={n.id === active}
          {...n}
        />
      )}
    </div>
  )
};


ReactDOM.render(
  <ParentComponent
    items={[
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ]}
  />,
  document.getElementById('root')
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы