React中组件通信01——props
移动开发
2023-09-20 19:34:54
阅读次数: 0
1. 父传子——props
1.1 简单例子——props
- 给子组件标签添加属性,属性名自定义,保持语义化即可。
- 简单例子的核心代码,很简单就先截图吧,代码一起附在最后了,需要注意的是:类式组件与函数式组件的不同,如下:
1.2 props 可以传递任何数据
1.2.1 传递数字、对象等
- 上面我们看到传递的是字符串,下面简单看看传递对象,如下:
1.2.2 传递函数
- 这个详细看下面的 《2. 子传父 + 子传子》,下面有详细的介绍。
1.2.3 传递模版jsx
- 如下:
2. 子传父 + 子传子——props
2.1 父传子——传递函数
- 父传子函数的重要性,主要是下面怎么通过它实现子传父,简单看看父传子传函数,如下:
- 效果如下:
2.2 子传父——通过父传子的函数实现
- 下面需求是在,子组件里添加狗狗数据,并把数据传递给父组件,如下:
- 看效果:
2.3 优化 + 子传子(兄弟通信)
- 下面实现的需求是:在上面子组件D中有一个按钮,点击触发addDog(即:添加新的dog),并在另一个子组件E中有所体现。
- 所以流程就是:父把函数addDog 传递给子组件D,子组件D中在调函数的时候把新增数据传给父,父的addDog中实现更新state数据,然后子组件E中实时展示最新的父中的传来的state数据,具体实现,如下:
- parent.jx,如下:
- D组件如下:
- E组件中就简单了,直接接受父传来的数据即可,如下:
- 效果如下:
3. render props
3.1 组件标签上的标签体内容 传递
- 如果要传递组件标签上的标签体内容,获取的时候需要注意,此传递的内容放到了props的children属性上,如下:
- 如果上面的标签体内容放的不是love,而是另外一个组件F,和ChildE形成父子关系的F组件,那依然是放在了props的children属性上,如下:
3.2 render props
- 上面3.1中通过把组件F放在ChildE的标签体内来形成父子关系,可以用另外一种方式实现,就是通过传递箭头函数的方式,如下:
<div className="childE">
<ChildE dogList={
this.state.dogList}
testJsx={
<p>测试一下传递jsx</p>}
render={
()=><F/>}
/>
</div>
{
props.render()}
- 传参数的情况,这里的函数名习惯用render,所以叫 render props ,如下:
<div className="childE">
<ChildE dogList={
this.state.dogList}
testJsx={
<p>测试一下传递jsx</p>}
render={
(kind)=><F petKind={
kind}/>}
/>
</div>
{
props.render('狗狗')}
接到E传来的宠物类型是:{
props.petKind}
4. 附代码:
- parent.jsx:
import React from "react";
import ChildA from "./ChildA";
import ChildB from "./ChildB";
import ChildC from "./ChildC";
import ChildD from "./ChildD";
import ChildE from "./ChildE";
import F from "./F";
import './index.css'
class Parent extends React.Component{
state = {
notice:'通知——今天有学生被开除了!',
expelledNum:1,
student:{
name:'张三',age:21,reason:'逃课次数过多'},
citys:['北京','上海','广州','深圳'],
dogList:[
{
dogName:'麦兜',dogAge:3},
{
dogName:'贝塔',dogAge:2},
]
}
getCityStrs =()=>{
return this.state.citys;
}
addDog =(dog)=>{
console.log('收到子组件添加的新dog:',dog);
const dogList = this.state.dogList;
const newDogList = [...dogList,dog];
console.log(newDogList);
this.setState({
dogList:newDogList});
}
render(){
return(
<div className="parent">
我是父组件!
<div className="childA">
<ChildA notice={
'通知——今天放假!'}/>
</div>
<div className="childB">
<ChildB notice={
this.state.notice} expelledNum={
this.state.expelledNum} student={
this.state.student}/>
</div>
<div className="childC">
<ChildC getCityStrs={
this.getCityStrs}/>
</div>
<div className="childD">
<ChildD addDog={
this.addDog}/>
</div>
<div className="childE">
<ChildE dogList={
this.state.dogList}
testJsx={
<p>测试一下传递jsx</p>}
render={
(kind)=><F petKind={
kind}/>}
/>
</div>
</div>
)
}
}
export default Parent;
- xxxA.jsx
import React from "react";
class ChildA extends React.Component{
render(){
return(
<div>
我是子组件A!!!——类式组件
<br /><br />
收到来自于父组件的数据:{
this.props.notice}
</div>
)
}
}
export default ChildA;
- xxxB.jsx
function ChildB(props){
const {
name,age,reason} = props.student;
return(
<div>
我是子组件B!!!——函数组件
<br /><br />
收到来自于父组件的数据:{
props.notice}
<br />
被开除的人数是:{
props.expelledNum}
<br />
被开除学生的信息:{
name}-{
age}-{
reason}
</div>
)
}
export default ChildB;
- xxxC.jsx
function ChildC(props){
const citys = props.getCityStrs();
return(
<div>
我是子组件C!!!——函数组件
<br /><br />
收到父传子的函数,并调用函数获取了数据:
{
citys.map((city,index)=>{
return <li key={
index}>{
city}</li>
})
}
</div>
)
}
export default ChildC;
- xxxD.jsx
function ChildD(props){
const newDog = {
dogName:'泡泡',dogAge:7};
const addDog = props.addDog;
return(
<div>
我是子组件D!!!——函数组件
<br />
{
}
<button onClick={
()=>addDog(newDog)}>添加狗狗</button>
</div>
)
}
export default ChildD;
- xxxE.jsx
function ChildE(props){
console.log(props);
const dogList = props.dogList;
return(
<div>
我是子组件E!!!——函数组件
<br />
{
props.testJsx}
<br />
展示狗狗信息:
<ul>
{
dogList.map((dog,index)=><li key={
index}>{
dog.dogName}-{
dog.dogAge}</li>)}
</ul>
<hr />
{
}
{
}
{
props.render('狗狗')}
</div>
)
}
export default ChildE;
- F.jsx
function F(props){
return(
<div>
我是E组件的子组件,我是F!!!——函数组件
<br />
接到E传来的宠物类型是:{
props.petKind}
</div>
)
}
export default F;
转载自blog.csdn.net/suixinfeixiangfei/article/details/132940751