RadCor
@RadCor
Если мой ответ вам помог, отмечайте его решением.

Как из компонента Child добавить родителю нужный класс?

Есть такая разметка

<div className="App">
      <h1 className={preloader.wrapper}>
        <Preloader />
        Hello CodeSandbox
      </h1>
      <h2 className={preloader.wrapper}>
        <Preloader />
        Start editing to see some magic happen!
      </h2>
    </div>


Полный код https://codesandbox.io/embed/jolly-alex-14fs5?font...

Для правильной работы компонента мне нужно в каждый родительский блок в ручную добавлять класс preloader.wrapper что не очень удобно.

Подскажите пожалуйста, как добавлять каждому родителю класс preloader.wrapper автоматически?

На чистом, нативном JS я бы сделал что-то типа этого https://jsfiddle.net/4nyg8kam/ но как это правильно реализовать на Реакт не знаю.
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Так делать не принято, и вам это не нужно.

Раз у всех этих элементов должен быть один класс, это должны быть корневые элементы экземпляров компонента Preloader. Тэг можно передать через props, как и те элементы, что сейчас являются соседними:

function Preloader({ Tag = 'h1', children }) {
  return (
    <Tag className={s.wrapper}>
      <div className={s.preloader}></div>
      {children}
    </Tag>
  );
}

<div className="App">
  <Preloader>hello, world!!</Preloader>
  <Preloader Tag="h2">fuck the world</Preloader>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Правильно сделать так:
<div className="App">
  <Preloader>
    <h1>
      Hello CodeSandbox
    </h1>
  </Preloader>
  <Preloader>
    <h2>
      Start editing to see some magic happen!
    </h2>
  </Preloader>
</div>


Костыль, чреватый глюками:
useLayoutEffect(() => {
  const parent = ref.current.parentNode; // ref - корневой элемент
  parent.classList.add(preloader.wrapper);
  return () => {
    parent.classList.remove(preloader.wrapper);
  }
}, []);
Ответ написан
Ваш ответ на вопрос

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

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