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

Question

[Капитан Какао]

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

<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/ но как это правильно реализовать на Реакт не знаю.

Answer 1

[0xD34F]

Так делать не принято, и вам это не нужно.

Раз у всех этих элементов должен быть один класс, это должны быть корневые элементы экземпляров компонента 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>

Comments

[Капитан Какао]

В итоге сделал совсем иначе, но за решение спасибо.

Answer 2

[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);
  }
}, []);

Comments

[Капитан Какао]

так не пойдёт, потому что вся вёрстка поедет, много же вложенностей, зависимостей у компонентов в реальном проекте.