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