javascript - React : why doesn't React. addons.cloneWithProps 使用组件？

Question

我不知道这是否是一个错误或如何解决这个问题，但我注意到 React.addons.cloneWithProps 适用于标准标签(如 <div> )但不适用于作为组件的子标签。

这是该问题的一个工作示例。我希望这两个 div 都有红色背景，但用组件创建的 div 却没有。

http://jsfiddle.net/ydpk2dp7/1/

var Main = React.createClass({
    render: function() {     
       children = React.Children.map(this.props.children, function (c, index) {
            return React.addons.cloneWithProps(c, {
                style: {
                    background: 'red'
                }
            });
       });

       return (
           <div>
               {children}
           </div>
       );
    },    
});

var Comp = React.createClass({
    render: function() {     
          return (
              <div>{this.props.children}</div>
          ); 
    }
});


React.render(
    <Main>
        <div>1</div>
        <Comp>2</Comp>
    </Main>
    , document.body);

Answer 1

我不确定这是否是错误，但我会将 react 组件包装在不属于父组件的父组件中。下面提供了一个工作结果。

var Main = React.createClass({
    render: function() {     
       children = React.Children.map(this.props.children, function (c, index) {
            return React.addons.cloneWithProps(c, {style: {background: 'red'}});
       });

       return (
           <div>
               {children}
           </div>
       );
    },    
});

var Comp = React.createClass({
    render: function() {     
          return (
              <div>{this.props.children}</div>
          ); 
    }
});


React.render(
    <Main>
        <div>
            <Comp>2</Comp>
            <Comp>3</Comp>
            <Comp>4</Comp>
        </div>
    </Main>
    , document.body)