React - 修改children(上)
React入门,大神轻喷哈^_^
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')); 运行后自然是输出下面两行啦
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咧?总不能你给我什么就呈现什么吧,比如上面的栗子中我就想把传入的元素统统变成红色字体,怎么做?
<D> <img ref="img" key="img" src="./logo.png" wen="wen" /> </D> 举上面栗子,输出的this.props.children,展开后会发现:组件在React中是以一个对象的形式存在,包含了type,ref 和 Key 属性,还有最重要的props属性。
const D = React.createClass({ render() { let children = this.props.children.map( (o,i)=>{ o.props.style = { color: '#f00' }; return o; }); return ( <div> { children } </div> ) } }); 运行后惊呆了,报错了: 于是乎继续回头翻阅React官方文档,瞄到了React.cloneElement,突然意识到了什么,没错,正面太锋芒,我们绕开它,直接修改对象不行,我们就拷贝一个自己用。 ReactElement cloneElement( ReactElement element,[object props],[children ...] ) 这里的element是我们要拷贝的原对象,在这里是o。 const D = React.createClass({ render() { let children = this.props.children.map( (o,i)=>{ return React.cloneElement(o,{ style: {color:'#f00'} }) }); return ( <div> { children } </div> ) } }); 运行之后,成了!!!
这个好理解,就是在遍历数组的时候需要给每个元素添加Key属性。不过问题来了,前边说,key不算是Props的一员,即不能通过o.props.key=...来添加key。看React.cloneElement的参数列表中只有element,props和children,我又醉了,这次文档也没帮到什么了。
是不是恍然大悟了?没错,虽然参数名是叫Props,不过实际上React是把ref/key这些属性也当成Porps的一部分(报错的信息里边也确实说"key" prop),只是在保存的时候会单独拿出来,为了和其他属性区分开。 const D = React.createClass({ render() { console.log(React.cloneElement); // 这里需要注意如果this.props.children只有一个元素,那将不是一个数组, // 所以还是需要提前判断类型,用Array.isArray(this.props.children) let children = this.props.children.map( (o,{ style: {color:'#f00'},key: i }) }); return ( <div> { children } </div> ) } }); 完成!!!
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |