Как правильно модифицировать children-компоненты из родителя?

Question

[romaro]

У меня есть компонент-обертка, в который могут помещаться другие компоненты (так же могут иметь вложения). Возникла необходимость модифицировать атрибут draggable у всех дочерних компонентов. По сути, мне нужно получить доступ к их html-тегам и выполнить setAttribute('draggable', 'false').

Конечно, я легко могу поправить это в дочернем компоненте:

return (
            <div>
                <a href={uri} draggable={false}>
                    {label}
                </a>
            </div>
        );

Но хотелось бы модифицировать из компонента-обертки. Я думаю, нужно использовать React.Children или есть другой способ?

Answer 1

[Alexandroppolus]

React.cloneElement
https://habr.com/ru/post/676384/

тут два момента. Во первых, это надо сделать иммутабельно, то есть ты не можешь просто взять и поменять атрибут, обойдя дерево чилдренов - нужно делать замену поддеревьев, подобно тому, как это делается в редуксе. Задачка не то чтобы сложная, но вполне себе кодоварсная.

Во вторых, если у тебя не просто верстка, а например

return (
            <div>
                <a href={uri} draggable={false}>
                    {label}
                </a>
                <CustomComponent ... />
            </div>
        );

то внутрь CustomComponent ты с этим своим React.cloneElement не залезешь, там ещё нет верстки, потому что ещё не было рендера CustomComponent.
Так что если надо всё дерево патчить, то только в useLayoutEffect, не ранее, и работать уже с готовым DOM. Какие тут могут быть подводные камни, сказать трудно.