1-6、React组件中传值、添加事件和this丢失问题
141 浏览量
2021-01-20
14:01:20
上传
评论
收藏 450KB PDF 举报
1-6、、React组件中传值、添加事件和组件中传值、添加事件和this丢失问题丢失问题
文章系列（文章系列（React框架基础）框架基础）
1-1、React环境搭建，以及初识jsx语法。
1-2、React熟悉，jsx语法以及变量绑定和三种渲染语句
1-3、React绑定属性和事件，以及事件的响应。
1-4、React中form表单下的input框初使用以及列表渲染
1-5、React初探组件化开发，高内聚低耦合
大家好，我是Counterrr
不忘初心，砥砺前行
本文目录本文目录
一、组件中传值；
二、添加事件和this丢失问题；
（tips：本文为我们React框架基础系列最后一篇，下个系列将开启React组件化开发和项目实战）
1、组件中传值、组件中传值:
好的在上节5、React初探组件化开发，高内聚低耦合中我们用react组件化开发的思想将之前的小项目重构了，最后的效果如下：
)
}
}
)
}
}
我们可以看到这边采用this.props.languages去获取这个数组。render函数定义在类的原型上我们去调用render里的this可以打印出组件实例对象，从而去获取绑定在实例对象上的props字段下
的languages数组，紧接着我们又将这个数组以languages属性传递给了Option组件，Option组件写成如下：
class Option extends React.Component {
render () {
return (
this.props.languages.map((item, index) => {
return
{item}
})
)
}
}
我们在Option组件里再用我们map方法去真实的渲染，页面如下：
Header组件代码如下：
class Header extends React.Component {
render () {
console.log(this)
return (
评论0