React RenderProps模式运用过程浅析
更新时间：2023年03月06日 09:20:54 作者：ฅQSω[*邱╭
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop
1.引入
上代码：
import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
render() {
return (
<div className="parent">
<h3>我是Parent组件</h3>
<A/>
</div>
)
}
}
class A extends Component {
render() {
console.log(this.props);
return (
<div className="a">
<h3>我是A组件</h3>
</div>
)
}
}
结果很简单就能猜到
改一下呢？
import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
render() {
return (
<div className="parent">
<h3>我是Parent组件</h3>
<A>Hello !</A>
</div>
)
}
}
class A extends Component {
render() {
console.log(this.props);
return (
<div className="a">
<h3>我是A组件</h3>
</div>
)
}
}
页面是没有现实Hello !的，但是之前一次的封装NaLink也有传递过标签体内容的，在子组件的props中，children:(内容)
所以A组件想要展示传递的标签体内容的话，还要改一下A组件
class A extends Component {
render() {
console.log(this.props);
return (
<div className="a">
<h3>我是A组件</h3>
{this.props.children}
</div>
)
}
}
2.改一下呢
import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
render() {
return (
<div className="parent">
<h3>我是Parent组件</h3>
<A>
<B/>
</A>
</div>
)
}
}
class A extends Component {
state ={ name:'Mike'}
render() {
console.log(this.props);
return (
<div className="a">
<h3>我是A组件</h3>
{this.props.children}
</div>
)
}
}
class B extends Component {
render() {
console.log('B--render');
return (
<div className="b">
<h3>我是B组件</h3>
</div>
)
}
}
A,B组件成了父子组件
但是这样，如果A组件想传自己的值给B组件，貌似是行不通的
3.再改一下呢
import React, { Component } from 'react'
import './index.css'
import C from '../1_setState'
export default class Parent extends Component {
render() {
return (
<div className="parent">
<h3>我是Parent组件</h3>
<A render={(name) => <B name={name}/>} />
</div>
)
}
}
class A extends Component {
state ={ name:'Mike'}
render() {
const {name} =this.state;
console.log(this.props);
return (
<div className="a">
<h3>我是A组件</h3>
{this.props.render(name)}
</div>
)
}
}
class B extends Component {
render() {
console.log('B--render');
return (
<div className="b">
<h3>我是B组件,接收到的name:{this.props.name}</h3>
</div>
)
}
}
主要是Parent组件和A组件之间调用要注意：
Parent组件中，render（当然可以去其他的名字这里）这样写，相当于预留了一个插槽，如果你需要渲染其他组件（例如例子中的B组件），在A组件中调用this.props.render()就可以渲染出B组件，不写的话就不会渲染出B组件
4.总结一下
如何向组件内部动态传入带内容的结构(标签)
Vue中:
使用slot技术, 也就是通过组件标签体传入结构
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性
children props
<A>
<B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
render props
<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
到此这篇关于React RenderProps模式运用过程浅析的文章就介绍到这了,更多相关React RenderProps内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了React实现导入导出Excel文件，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要为大家详细介绍了React处理复杂图片样式的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了React路由中的redux和redux知识点拓展，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的朋友可以参考学习一下2022-08-08
TypeScript 实际上就是具有强类型的 JavaScript,可以对类型进行强校验,好处是代码阅读起来比较清晰,代码类型出现问题时,在编译时就可以发现,而不会在运行时由于类型的错误而导致报错,这篇文章主要介绍了ReactJS中使用TypeScript的方法,需要的朋友可以参考下2024-04-04
React 18的推出标志着React并发特性的正式到来,其中useTransition钩子函数是一个重要的新增功能,下面我们就来学习一下useTransition钩子函数的具体使用吧2024-02-02
ES6 class类链式继承，实例化及react super(props)原理详解
这篇文章主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下2020-02-02
这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在使用 React 进行开发过程中，或多或少使用过 Refs 进行 DOM 操作，这篇文章主要介绍了 Refs 功能和使用场景以及注意事项，希望对大家有所帮助2023-07-07
这篇文章主要介绍了React Native 图片查看组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
解决React报错No duplicate props allowed
这篇文章主要为大家介绍了React报错No duplicate props allowed解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论