新建一个ComentList.js 文件
定义一个新的组件.png
import React from "react"
// 创建组件
class ComentList extends React.Component {
constructor(props) {
super(props);
this.state = {
// 在这里定义变量
visible: true,
// 那么如何改变变量 ？ 下面示例
// this.setState({
// visible: true,
// });
}
}
render() {
return (
// 这里写页面结构
<div className="list">
{/* 通过props 的形式来接收父组件的传值 */}
<h3> { this.props.news } </h3>
<ul>
{
this.props.arr.map(( item,index )=> { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
return (
<li key={index}>
评论是:{item.name}
</li>
)
})
}
</ul>
</div>
)
}
}
// 暴露组件
export default ComentList;
父组件中使用子组件
import ComentList from './ComentList'
在父组件的render 函数中使用 (代码只贴出了部分 )
render() {
return (
// 这里的arr news 用于传递给子组件
<div>
<ComentList arr={this.state.arr} news=" 数据数据 ">
</div>
)
}
注意事项
this.props.news /// 用于接收父组件的值
import 引入 必须要在const let 之前
注意.png
继续 子组件==》父组件 也是通过props
子组件传值给父组件.png
父组件接收子组件传递的数据.png
结束了：通过props来进行父子传值。
