经过上面的学习,我们已经会了组件化的开发;
但是第四篇的项目有个致命的缺陷;
就是它的网站名,与a标签的链接地址是静态数据,是定死的,这也就是我们说的硬代码;
这样的话,那我们在调用这个自定义组件的时候,所有的组件都是一样的,这样就没有任何意义了;
所以现在让我们开始让组件内的数据动起来,而不是我们自己写的静态数据;
上代码!
0.props
首先我们要认识到这样的几个问题;
数据的来源:react的数据是这样的,它像一个瀑布一样,它的数据从一个父组件向它的子组件的方向流下,而且父组件传下去的数据子组件只有自读权限,不能修改父组件传递的数据,
数据的传递方式: props,props可以将父组件的数据传递给子组件
所以当我们使用父组件的数据时,我们可以直接this.props.XXX就可以使用父组件传递下来的XXX数据了
但是props有一个例外
1.让我们修改存放网站名的组件
将原来的
改为
2.让我们修改存放网站的组件
将原来的
改为
3.让我们修改存放上述两个子组件的大组件
现在两个子组件已经将数据从死数据改为父组件传递下来的数据了;
所以现在我们来改装这个父组件,给子组件传递数据
将原来的
改为
因为父组件也不是数据的来源,所以我们先得到父组件的父组件的数据,也就是爷爷辈的组件传递下来的数据,this.props
然后我们将this.props.wname与this.props.wlink分别传递给下面的两个子组件
4.让我们修改渲染的函数
将原来的
改为
这时候因为渲染函数是数据源了,就直接像写js的属性一样,直接把网站名与网站链接地址传递给Webshow组件
5.运行效果
6.this.props.children
刚才我们学习了如何使用this.props传递普通数据,现在我们有个特殊的需求,
现在又一个ul列表,但是下面的子节点的个数不确定,这时候我们就要用到this.props.children
this.props.children与普通的this.props.XXX不同在于,
this.props.children传递的是子节点,
this.props.传递的是普通数据
现在让我们看下这个this.props.children是如何实现上述的需求的
首先先定义一个自定义的组件
然后编写渲染函数
实现效果
7.属性值的验证
8.设置属性的默认值
