@Slav4ka

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

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

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


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

  const onClick = e => setActive(+e.target.dataset.id);

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


ReactDOM.render(
  <ParentComponent items={[
    { id: 0, name: 'один' },
    { id: 1, name: 'два' },
    { id: 2, name: 'три' },
  ]} />,
  document.getElementById('root')
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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