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布尔值。

如何装饰反应组件及其所有子组件？

1 个答案: