React的父子传值（父传子）
作者：互联网
话不多说直接上代码!
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <!-- 主意这里的script连的是我本地的 -->
9 <script src="./react.development.js"></script>
10 <script src="./react-dom.development.js"></script>
11 <script src="./babel.min.js"></script>
12 </head>
13 <body>
14 <div id="root">
15
16 </div>
17 </body>
18 <script type="text/babel">
19 //父亲
20 class Abox extends React.Component{
21 constructor(props) {
22 super(props);
23 this.state = {
24 arr: [{
25 "userName": "fangMing", "text": "123333", "result": true
26 }, {
27 "userName": "zhangSan", "text": "345555", "result": false
28 }, {
29 "userName": "liSi", "text": "567777", "result": true
30 }, {
31 "userName": "wangWu", "text": "789999", "result": true
32 },]
33 }
34 }
35 render() {
36 return (
37 <div>
38 <Son arr={this.state.arr}></Son>
39 </div>
40 )
41 }
42 }
43
44
45
46
47 //儿子
48 class Son extends React.Component{
49 constructor(props) {
50 super(props);
51 }
52
53 render() {
54 console.log(this.props.arr)
55 return (
56 <div className="list">
57 <ul>
58 {
59 this.props.arr.map(item => {
60 return (
61 <li key={item.userName}>
62 {item.userName} 评论是:{item.text}
63 </li>
64 )
65 })
66 }
67 </ul>
68
69 </div>
70 )
71 }
72 }
73
74 ReactDOM.render(
75 <div>
76 <Abox></Abox>
77 </div>,
78 document.getElementById("root")
79 )
80 </script>
81 </html>
标签：userName,return,text,React,item,父传子,props,传值,result 来源： https://www.cnblogs.com/LC123456/p/12115936.html