props运用场景
组件传参
父传子
场景一：
传递变量
父组件中直接绑定变量
<Son data={obj}/>
<Son data={obj}{...obj2}/>
子组件this.props.data接收
data 是自定义的属性名
为什么传的第二个对象不解构会报错？
因为第一个对象会有data作为属性名，而第二个对象不解构就没有属性名
场景二：
传递内容
组件极少部分不同时使用
父组件中双标签包裹内容
我是父组件传来的内容
子组件用this.props.children接收
一般用闭合标签，也就是为了这样传递参数
场景三：
传递组件
大多用于子组件大部分相同，少数不同时使用
父组件绑定组件名称<Parent left={ <Son1> }> <Parent left={ <Son2> }>
子组件this.props.left接收
left 是自定义的属性名
示例
父传子
父组件
import React, { Component } from 'react'; import One from './one.jsx' import Two from './two.jsx' import Three from './three.jsx' import Four from './four.jsx' import Five from './five.jsx' class Props extends Component { render() { const obj = { age:'32', name: "张三" } const obj2 = { job: '前端工程师' } return ( <div className="props_main"> <h3>props的使用场景有哪些</h3> <One title="全国名师推荐" /> {/* 复合数据类型需要用扩展运算符，否则会报错。因为不用扩展运算符，没有属性去接收 */} <Two data={obj} {...obj2} /> <Three> <a href="#"> 更多>> </a> </Three> <Three /> <Four left={<Five />} /> </div> ) } } export default Props
子组件
One子组件
import React, { Component } from 'react'; class One extends Component { render() { //父组件传一个属性title，子组件用this.props.title接收 return ( <div className="props_main"> <h3>one</h3> {/* 第一种传参方法 */} {this.props.title}//全国名师推荐 </div> ) } } export default One
Two组件
//这是复合型组件 import React, { Component } from 'react'; class Two extends Component { render() { const { name } = this.props.data const { data, job } = this.props return ( <div className="props_main"> <h3>two</h3> {this.props.data.name}//元芳 {name}//元芳 {data.age}//32 {job}//前端工程师 </div> ) } } export default Two
Three组件
import React, { Component } from 'react'; class Three extends Component { render() { return ( <div className="props_main"> <h3>three</h3> {/* 这种传参方法 ,可以被复用 */} {this.props.children}//更多>> </div> ) } } export default Three
Four组件
import React, { Component } from 'react'; class Four extends Component { render() { return ( <div className="props_main"> <h3>Four</h3> {/* 第三种传参方法 */} {this.props.left}//我是第五个组件 </div> ) } } export default Four
Five组件
import React, { Component } from 'react'; class Five extends Component { render() { return ( <div className="props_five"> <h3>我是第五个组件</h3> </div> ) } } export default Five
