Как мне украсить реактивный компонент и все его дочерние элементы?

Question

https://jsfiddle.net/69z2wepo/81913/

Я украшаю дерево компонентов и добавляю некоторые метаданные к своим компонентам. Прекрасно работает на компоненте верхнего уровня (A); но если я попытаюсь украсить свои подкомпоненты (закомментированные, но без комментариев иллюстрирует проблему) - разрывы цепочки рендеринга и пропущенные реквизиты не будут отображаться должным образом (или вообще не будут). У кого-нибудь есть понимание - я прикрепил скрипку выше.

   var dec = (t, k, d) => {
  console.log('hello decoration')
  var el = React.cloneElement(d.value(), {'label': 'my-component-label'})
  return {value: () => el}
}

class B extends React.Component{
    constructor(props) {
    super(props)
  }
  //@dec
  render() {
    return <div>
        {this.props.data}
    </div>
  }
}
class A extends React.Component{
    constructor(props) {
    super(props)
  }

  @dec 
  render() {
    return <div>
        <B data={99 + 101}/>
    </div>
  }
}

ReactDOM.render(
  <A/>,
  document.getElementById('container')
);

Answer 1

Чтобы понять рекурсию, вы должны сначала понять рекурсию!

Кроме того, я успешно использовал этот фрагмент в прошлом:

recursiveCloneChildren(children) {
   return React.Children.map(children, (child) => {
     let childProps = {};

     if (!child || !child.props) {
       return child;
     }
     childProps.DECORATED = true;
     childProps.children = this.recursiveCloneChildren(child.props.children);
     return React.cloneElement(child, childProps);
   });   
}

Просто дайте ему this.props.children компонента, и он сделает все остальное. в этом фрагменте мы просто добавляем DECORATED логическое значение для всех детей.