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)

clipboard.png

重要的问题来了,那如何控制传入的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},下面会提及到。
clipboard.png

  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的源码,不看不知道,一看想给文档一巴掌,误导我了!

clipboard.png

是不是恍然大悟了?没错,虽然参数名是叫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>
        )
    }
});

完成!!!


Web开发
在学习Web前端的过程中,不管是解开了的纠结的问题,或者从其他高手学习到的知识点,也或者是自己动手创...
1 篇内容引用
307 声望
27 粉丝
0 条评论
推荐阅读
协同开发
同一个开发项目中如果有多名程序猿,那么每个程序猿都有责任培养自己协同开发的意识,为的是代码的质量,质量,质量(重要的事情说三遍!!!)。协同开发是个挖坑和填坑的过程,自己做的好可以尽量避免自己挖坑...

zhoushx3阅读 3.4k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

307 声望
27 粉丝
宣传栏