React - 修改children(上)

React入门，大神轻喷哈^_^
下面的代码是创建在React 0.14.*版本的
今天在尝试封装React component的时候碰到了几个问题，猜小白们学习React中可能会碰到，我就整理下但愿能帮助到小白们。
Keyword: props children cloneElement

• React父子组件交流通常是用props传递，好比：

const T = React.createClass({
        render() {
            return <h1>{ this.props.text }</h1>
        }
    });
    const B = React.createClass({
        render() {
            return (
                <header>
                    <T text = "level A" />
                    <T text = "level B" />
                </header>
            )
        }
    });
    ReactDOM.render( <B />, document.querySelector('#container'));

运行后天然是输出下面两行啦
level A
level B

• 上面栗子中有两个子组件包含在<header />中，这里<header>是咱们熟悉的html标签，可是假设换作自定义的组件，以下，若是控制< D />的子组件？
  这时候就须要利用this.props的一个重要属性了：children。

const C = React.createClass({
        render() {
            return (
                <D>
                    <h1>lever C</h1>
                    <h1>lever D</h1>
                </D>
            )
        }
    });
    const D = React.createClass({
        render() {
            return(
                <div>
                    { this.props.children }
                </div>
            )
        }
    });
    ReactDOM.render( <C />, document.querySelector('#container'));

这里this.props.children会得到传入的两个React element <h1>并成的数组，将其输出到终端以下：（后边会继续介绍这个，先pass）

重要的问题来了，那如何控制传入的elements咧？总不能你给我什么就呈现什么吧，好比上面的栗子中我就想把传入的元素通通变成红色字体，怎么作？

1. 给外层div加个ref，如 X , 而后利用this.refs.X.style.color = '#f00'。这种作法只能勉强知足当前作法，很不灵活，一旦要修改的样式子级没法继承就没用了，因此不可取。

2. 给外层div加个className如 cl ，接着在样式文件中写明.cl h1 的样式。这种作法比上一种方案好一点，可是缺点是只能应付样式，而且须要在已知children的标签类型才行。但假设需求就是给children的全部的文本类标签添加红色样式，但不说明用的是<h1>,<h2>,<h3>仍是<span>等等标签，那这种作法就须要在样式文件中穷举了，固然不可取。

3. 是否能够直接遍历this.props.children进而修改属性呢？

<D>
        <img ref="img" key="img" src="./logo.png" wen="wen" />    
    </D>

举上面栗子，输出的this.props.children，展开后会发现：组件在React中是以一个对象的形式存在，包含了type, ref 和 Key 属性，还有最重要的props属性。
props包含了除前边三个以外的写在组件上的其余属性，包括默认属性src / alt这些，还有自定义的如这里的wen属性。
！这里注意的是props中不包含{ref，key},下面会说起到。

1. 因而考虑经过直接对props进行修改属性的方法来达到咱们的目的，修改D组件。

const D = React.createClass({
        render() {
            let children = this.props.children.map( (o, i)=>{
                o.props.style = { color: '#f00' };
                return o;
            });
            return (
                <div>
                    { children }
                </div>
            )
        }
    });

运行后惊呆了，报错了：
Uncaught TypeError: Can't add property style, object is not extensible
意思是说props属性是不能扩展的，即不能修改。
后面继续尝试给o增删属性都是会报错，说明这里遍历的每一个对象o都是read only的。
醉了。。。这还怎么达到咱们的目的咧？

因而乎继续回头翻阅React官方文档，瞄到了React.cloneElement，忽然意识到了什么，没错，正面太锋芒，咱们绕开它，直接修改对象不行，咱们就拷贝一个本身用。

ReactElement cloneElement(
  ReactElement element,
  [object props],
  [children ...]
)

这里的element是咱们要拷贝的原对象，在这里是o。
props可选，当传入个对象的时候是会和原对象的props进行合并，合并的方式是无则添加，有则覆盖。
children就是前边提到的props.children,用来加入子组件的，也是可选，这个栗子中暂时用不到。
因而，尝试修改代码以下：

const D = React.createClass({
    render() {
        let children = this.props.children.map( (o, i)=>{
            return React.cloneElement(o, { style: {color:'#f00'} })
        });
        return (
            <div>
                { children }
            </div>
        )
    }
});

运行以后，成了！！！
固然扩展的话能够根据判断o.type或者其余要求来相应的修改属性，此处统一将全部的<h1>变为红色。

• 不过到这里还没结束，虽然效果有了，可是在console中仍是出现了警告：
  Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of D. It was passed a child from C.

这个好理解，就是在遍历数组的时候须要给每一个元素添加Key属性。不过问题来了，前边说，key不算是Props的一员，即不能经过o.props.key=...来添加key。看React.cloneElement的参数列表中只有element, props和children，我又醉了，此次文档也没帮到什么了。
因而乎，看看源码cloneElement的源码，不看不知道，一看想给文档一巴掌，误导我了！

是否是恍然大悟了？没错，虽然参数名是叫Props，不过实际上React是把ref/key这些属性也当成Porps的一部分（报错的信息里边也确实说"key" prop），只是在保存的时候会单独拿出来，为了和其余属性区分开。
在clone的过程当中，对props的遍历会先单独把ref和key拿出来判断，而且不会保存在新的Props中，也就在输出的时候看到的是分离的。
不过，既然clone的时候props参数包含着Key,那就容易了，修改一行代码以下。

const D = React.createClass({
    render() {
        console.log(React.cloneElement);
        // 这里须要注意若是this.props.children只有一个元素，那将不是一个数组，
        // 因此仍是须要提早判断类型，用Array.isArray(this.props.children)
        let children = this.props.children.map( (o, i)=>{
            return React.cloneElement(o, { style: {color:'#f00'}, key: i })
        });
        return (
            <div>
                { children }
            </div>
        )
    }
});

完成！！！

• 另外，React还提供了关于React.children的几个有用的顶层API，也颇有用，这里就不说了，具体的参考官方文档哈。
  https://facebook.github.io/react/docs/top-level-api.html#react.children