Question

我不知道这是一个错误或如何解决这个问题，但我注意到React.addons.cloneWithProps使用标准标记（如<div>），但没有作为组成部分的孩子。

这是问题的一个有效例子。我希望这两个div都有一个红色背景，但是用一个组件创建的那个不会。

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

我不确定这是不是一个bug，但是我会将反应组件包装在父组件不拥有的父组件中。以下提供了工作结果。

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)

Answer 2

参加派对的时间已经很晚了，但我想，无论将来看到这个人，我都会帮助他们。

问题是你放弃了style中的Comp道具：

var Comp = React.createClass({
    render: function() {
          var style = this.props.style; // you weren't passing this to the <div> below
          return (
              <div style={style}>{this.props.children}</div>
          );
    }
});

最好从props中提取您需要的内容并传递其余内容。使用ES2015的destructuring spread operator轻松完成：

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

这将允许在您的组件上指定道具，在最初编写时，您没有想到。

现在，例如，您现在可以添加onClick处理程序并期望它可以工作：

<Comp onClick={this.onClick} />

记住，“DOM”元素上只有props具有特殊含义。对于自定义元素，它们只是您可以根据需要进行解释的常规属性。

React：为什么React.addons.cloneWithProps不使用Components？

2 个答案: