`react.cloneElement `忽略className，我怎么能给某个东西一个className

Question

仔细阅读文档，现在不推荐使用的cloneWithProps似乎合并了className，但cloneElement忽略了中传递的className

https://jsfiddle.net/z12hc5er/1/

var Foo = function () {
    return <div className="shows-up">Hello World</div>;
};
var Bar = function () {
    return React.cloneElement(<Foo/>, {className: 'ignored'});
};
ReactDOM.render(
    <Bar/>,
    document.getElementById('container')
);

有什么方法可以影响克隆元素的className吗？

Answer 1

className是Foo中某个特定元素的属性，如果有多个元素具有classNames会怎样？

第二个参数用于传递道具。道具只是将数据传递给组件的一种方式，react不会假设你想如何使用它们，所以你必须明确地告诉它，例如：

var Foo = function (props) {
    return <div className={props.className || 'shows-up'}>Hello World</div>;
};
var Bar = function () {
    return React.cloneElement(<Foo/>, {className: 'not-ignored'});
};
ReactDOM.render(
    <Bar/>,
    document.getElementById('container')
);

我想他们认为用style和className做一些特别的事情（而忽略key和ref）在cloneWithProps中过于固执己见。

编辑：从这里看，它实际上是出于优化的原因：https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html