React: почему React.addons.cloneWithProps не работает с компонентами?

Question

Я не знаю, является ли это ошибкой или как это работает, но я заметил, что React.addons.cloneWithProps работает со стандартными тегами (например, <div>), но не с дочерними компонентами.

Это рабочий пример проблемы. Я ожидаю, что оба divs будут иметь красный фон, но тот, который создан с компонентом, не работает.

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

Я не уверен, если это ошибка или нет, но я бы обернуть реакции компонентов родителя не принадлежит родительского компонента. Ниже приведен рабочий результат.

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} /> 

Запомнить, только props на элементы «DOM» имеют особое значение. Для пользовательских элементов они просто регулярные свойства, которые вы должны интерпретировать по своему усмотрению.