react入门笔记五 (组件传值----------父传子->props)

经过上面的学习,我们已经会了组件化的开发;

但是第四篇的项目有个致命的缺陷;

就是它的网站名,与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.设置属性的默认值