组件传值
一、正传---props
函数组件
子组件内进行接受
// 1.把props当成函数的形参传入
let Zi=(props)=>{
return (
<div>
{/* 2.使用props来进行数据的展示 */}
ziziziziziziz--{props.title}
</div>
)
}
export default Zi
父组件内进行传递
import Zi from "./zi.jsx"
let Fu=()=>{
return (
<div>
FFUFUFUFUFUFUF
{/* 父组件传递 */}
<Zi title="我是父组件的书"></Zi>
</div>
)
}
export default Fu
父组件
import Zi from "./zi.jsx"
let Fu=()=>{
// 定义数据
let obj={
title:"你好么么哒!!!!!"
}
return (
<div>
FFUFUFUFUFUFUF
{/* 父组件使用扩展运符传递 */}
<Zi {...obj}></Zi>
</div>
)
}
export default Fu
子组件
import React from 'react'
// 1.形参传入props
export default function Zi(props) {
let {title}=props
return (
<div>
Zi
<span>
{title}
</span>
</div>
)
}
类组件
1.子组件 this.props.xxx
import React, { Component } from 'react'
export default class zi extends Component {
render() {
return (
<div>
zi
{/* 1.子组件定义props */}
<h1>父组件的数据式-----{this.props.title}</h1>
</div>
)
}
}
2.父组件传递
import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
render() {
return (
<div>
fu
{/* 父组件给子组件传递数据 */}
<Zi title="我式父组件的数据"></Zi>
</div>
)
}
}
// 子组件中使用结构来优化代码
import React, { Component } from 'react'
export default class zi extends Component {
render() {
// 使用解构的方式见到了this。props的重复出现率
let {title,age,name,sex,love}=this.props
return (
<div>
zi
{/* 1.子组件定义props */}
<h1>父组件的数据式-----{title}</h1>
<h1>父组件的数据式-----{age}</h1>
<h1>父组件的数据式-----{name}</h1>
<h1>父组件的数据式-----{sex}</h1>
<h1>父组件的数据式-----{love}</h1>
</div>
)
}
}
// 父组件使用扩展运算符传递数据
import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
render() {
let obj={
title:"我是title",
name:"我是name",
age:18,
sex:"男",
love:"女"
}
return (
<div>
fu
{/* 扩展运算符快速传递数据 */}
<Zi {...obj}></Zi>
</div>
)
}
}
this.props.children
他就是react中的插槽类似于vue的slot
this.props.children 他表示所有组件的子节点(默认写上没有任何作用 在组件被调用的时候 如果我们在他的开关标签中插入dom元素 那么this.props.chilren 就会接收并且显示)