Компонент React, который отображает дочерние компоненты путем самостоятельного увеличения значения CSS-заполнения. ⇐ CSS

[Anonymous]

Привет, я пытаюсь реализовать вариант использования, в котором компонент реагирования отправляет некоторое значение заполнения стилизованным компонентам, самостоятельно увеличивая его в зависимости от того, как он вложен в рендеринг.
Допустим, есть компонент List, который должен отображать родительский и дочерний компоненты с некоторыми дополнительными отступами, поэтому я выполнил реализацию, как показано ниже, но я не уверен, что использование useeffect и usestate здесь подойдет. Могут быть некоторые побочные эффекты, которых я боюсь.
Вот компонент списка

Код: Выделить всё

const Parent = ({ title, children }) => {
const [padding, setPadding] = useState(0);
useEffect(() => {
setPadding(padding + 20);
}, []);

return (

{title}

{children}


);
};

Вот ссылка на коды и коробку. РЕДАКТИРОВАТЬ ЗДЕСЬ

Подробнее здесь: https://stackoverflow.com/questions/785 ... the-paddin