使用 cloneElement 更改 class 和 React 子项的样式

Question

使用最新的 React (0.13) 我试图在渲染之前使用 cloneElement 更改子元素的 class 和样式。

查看测试：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?

看起来这应该很简单，但是我似乎无法实现此 fiddle 中详述的所需行为：https://jsfiddle.net/69z2wepo/7924/

Answer 1

您发送的 'className' 道具被发送到 Child 组件，而不是 div，因此 'green' 永远不会到达 div。

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

这里有更新的 fiddle 向您展示正在发生的事情：https://jsfiddle.net/69z2wepo/7927/

这里有一个 jsfiddle 可能有助于进一步阐明它：http://jsfiddle.net/69z2wepo/7926/

这可能是您想要的：https://jsfiddle.net/69z2wepo/7928/
注意 {...this.props} 将 Child 的道具转移到 div。

使用 cloneElement 更改 class 和 React 子项的样式

Changing class and style of React children using cloneElement

javascript

reactjs