react学习---day03--props传递数据

react中props就是利用标签的自定义属性进行传值,当多组件使用同一组数据时props可以很优雅的传递数据
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>

创建了三个div用于组件渲染

 1 class App extends React.Component {
 2     // react中props就是利用标签的自定义属性进行传值
 3     render() {
 4         return (
 5             <ul>
 6                 <li>{this.props.name}</li>
 7                 <li>{this.props.age}</li>
 8                 <li>{this.props.sex}</li>
 9             </ul>
10         )
11     }
12 }
13 const person = {
14     name: "张三",
15     age: 18,
16     sex: "男",
17 }
18 ReactDOM.render(<App {...person} />, document.getElementById("app1")) // 利用babel+react可以使扩展运算符展开对象,原生的...是不支持展开对象的
19 ReactDOM.render(<App {...person} />, document.getElementById("app2"))
20 ReactDOM.render(<App {...person} />, document.getElementById("app3"))

值得注意的是在react+babel是可以在扩展运算符中展开对象的

当渲染的组件根标签中有props,html自定义属性时可以直接在render函数中通过this.props取到该值

posted @ 2021-01-12 10:26  微笑着的代码狗  阅读(108)  评论(0)    收藏  举报