摘要：于是考虑通过直接对进行修改属性的方法来达到我们的目的，修改组件。运行后惊呆了，报错了意思是说属性是不能扩展的，即不能修改。于是，尝试修改代码如下运行之后，成了当然扩展的话可以根据判断或者其他要求来相应的修改属性，此处统一将所有的变为红色。
React入门，大神轻喷哈^_^
下面的代码是建立在React 0.14.*版本的
今天在尝试封装React component的时候碰到了几个问题，猜小白们学习React中可能会碰到，我就整理下希望能帮助到小白们。
Keyword: props children cloneElement
React父子组件交流一般是用props传递，比如：
const T = React.createClass({
render() {
return { this.props.text }
}
});
const B = React.createClass({
render() {
return (
)
}
});
ReactDOM.render( , document.querySelector("#container"));
运行后自然是输出下面两行啦
level A
level B
上面栗子中有两个子组件包含在
这时候就需要利用this.props的一个重要属性了：children。
const C = React.createClass({
render() {
return (
lever C
lever D
)
}
});
const D = React.createClass({
render() {
return(
{ this.props.children }
)
}
});
ReactDOM.render(
这里this.props.children会获得传入的两个React element
重要的问题来了，那如何控制传入的elements咧？总不能你给我什么就呈现什么吧，比如上面的栗子中我就想把传入的元素统统变成红色字体，怎么做？
给外层div加个ref，如 X , 然后利用this.refs.X.style.color = "#f00"。这种做法只能勉强满足当前做法，很不灵活，一旦要修改的样式子级无法继承就没用了，所以不可取。
给外层div加个className如 cl ，接着在样式文件中写明.cl h1 的样式。这种做法比上一种方案好一点，但是缺点是只能应付样式，并且需要在已知children的标签类型才行。但假设需求就是给children的所有的文本类标签添加红色样式，但不说明用的是
是否可以直接遍历this.props.children进而修改属性呢？
举上面栗子，输出的this.props.children，展开后会发现：组件在React中是以一个对象的形式存在，包含了type, ref 和 Key 属性，还有最重要的props属性。
props包含了除前边三个之外的写在组件上的其他属性，包括默认属性src / alt这些，还有自定义的如这里的wen属性。
！这里注意的是props中不包含{ref，key},下面会提及到。
于是考虑通过直接对props进行修改属性的方法来达到我们的目的，修改D组件。
const D = React.createClass({
render() {
let children = this.props.children.map( (o, i)=>{
o.props.style = { color: "#f00" };
return o;
});
return (
{ children }
)
}
});
运行后惊呆了，报错了：
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 (
{ children }
)
}
});
运行之后，成了！！！
当然扩展的话可以根据判断o.type或者其他要求来相应的修改属性，此处统一将所有的
不过到这里还没结束，虽然效果有了，但是在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 (
{ children }
)
}
});
完成！！！
另外，React还提供了关于React.children的几个有用的顶层API，也很有用，这里就不说了，具体的参考官方文档哈。
https://facebook.github.io/react/docs/top-level-api.html#react.children
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78603.html
摘要：倘若在之后修改对象属性，会有两种结果若在非下，不会报错，但是任何修改都是不起作用的。总结开发过程中还是用非压缩版的好，有利于及时发现问题。 在 React - 修改children(上) 中我提到了React在遍历children过程中是不允许修改其中的React Element的，这里我要做点补充，就是有个前提是：使用的React是非压缩版的，也就是说不是使用react.min.js...
摘要：使用者需要做的，就是完成回调函数里的逻辑即可，十分简单。如果你需要异步生成，你需要设置参数为元素展现时的回调函数，接收和作为参数。多次展现时，是否每次都触发回调函数组件里监听滑动事件时，用了。 showImg(https://segmentfault.com/img/bVbloJf?w=620&h=480); 写在前面 在这个数据无比重要的时代，用户在网页上面的一系列操作，都需要用数据...
摘要：每当的值改变后，我们只需要重新调用方法即可现在，让我们来实现一个类似风格的归约函数，以不断的递增。归约函数是不允许修改当前状态的，所有最简单的实现方式就是。 原文：Functional Components with React stateless functions and Ramda 阅读本文需要的知识储备： 函数式编程基本概念（组合、柯里化、透镜） React 基本知识（组件、...
摘要：组件有两个关键的表明当前是否应高亮，自己被点击时调用的回调函数，由于是每个页面的容器，它只负责把渲染出来，所以用函数式组件即可。 这种模式本质上解决的是组件之间传值的问题。但是它对于传值以及一些内部操控的逻辑封装得更严密。 场景：希望减少上下级组件之间props的传递，简单来说就是不用传做显式地传值，来达到组件之间相互通信的目的 举例来说，某些界面中应该有Tabs这样的组件，由Tab和...
摘要：近两年来一直在关注开发，最近也开始全面应用。首先，我们从无状态组件开始。渲染回调模式有一种重用组件逻辑的设计方式是把组件的写成渲染回调函数或者暴露一个函数属性出来。最后，我们将这个回调函数的参数声明为一个独立的类型。 近两年来一直在关注 React 开发，最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程，但如何将 TypeScri...
阅读 3335·2021-11-11 16:54
阅读 3473·2021-10-11 10:58
阅读 1225·2021-08-30 09:41
阅读 1781·2019-08-30 15:54
阅读 1972·2019-08-30 14:00
阅读 2677·2019-08-29 17:13
阅读 1606·2019-08-29 15:19
阅读 552·2019-08-29 15:14
