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

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')
);

reactjs javascript decorator ecmascript-next react-jsx
person Conqueror    schedule 30.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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 для всех дочерних элементов.

person Patrick    schedule 30.06.2017
comment
Я ставлю вам +1, потому что считаю, что это сработает, и ценю время, которое вы потратили, чтобы ответить на этот вопрос. Что, как говорится; Я ищу ответ, который использует декораторы es7 вместо пользовательского понятия украшения. Ваше здоровье! - person Conqueror; 01.07.2017
comment
Тогда вы можете обновить свой вопрос, вы не украшаете дерево компонентов, вы украшаете функцию рендеринга, я все еще думаю, что это можно сделать таким же образом, но у меня недостаточно опыта в ES7, чтобы фактически предложить ответ - person Patrick; 01.07.2017