Изменение класса и стиля для детей React с использованием cloneElement

Question

Использование последнего React (0.13) Я пытаюсь изменить класс и стиль дочернего элемента, используя cloneElement перед рендерингом.

Просматривая тесты: https://github.com/facebook/react/blob/0.13-stable/src/classic/element/tests/ReactElementClone-test.js#L44

И другие ответы: ReactJS - How to change style and class of react component?

Похоже, это должно быть довольно просто, но я не могу показаться, чтобы добиться желаемого поведения, как описано в этой скрипкой: https://jsfiddle.net/69z2wepo/7924/

Answer 1

Вы отправляете оповещение «className», отправляемое на компонент Child, а не div, поэтому «зеленый» никогда не достигает div.

<Parent> 
    <div> 
    <Child className="green"> 
     <div className="red">#textnode</div> 
    </Child> 
    <Child className="green"> 
     <div className="red">#textnode</div> 
    </Child> 
    </div> 
</Parent> 

Вот обновленная скрипка, чтобы показать вам, что происходит: https://jsfiddle.net/69z2wepo/7927/

Вот jsfiddle, которые могли бы помочь прояснить его больше: http://jsfiddle.net/69z2wepo/7926/

Это, вероятно, что вы хотели: https://jsfiddle.net/69z2wepo/7928/
Примечания к {...this.props} для передачи Child реквизитов на div.