React - children props 与 render props

一. children props
- 1. 函数组件形式
- 2. 类组件形式
二. render props
- 1. 函数组件形式
- 2. 类组件形式

children props：https://zh-hans.reactjs.org/docs/glossary.html#propschildren
render props：https://zh-hans.reactjs.org/docs/render-props.html

一. children props

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

组件嵌套使用，使用 children props 通过组件标签体传入结构

1. 函数组件形式

/*** 组件嵌套使用，使用 children props 通过组件标签体传入结构* Parent组件：通过闭合标签的形式进行 传值到子组件* A组件：通过 props.children 接收值*/
import React from "react";export default function Parent() {return (<div><h2>Parent组件</h2><A1>{/* 传递的内容，可以是状态、参数 */}这里是内容</A1><A2>{/* 传递的内容，可以是组件 */}<B /></A2></div>);
}function A1(props) {return (<div><h2>A1组件</h2>{/* 通过 props.children 接收 Parent组件传递过来的内容 */}{props.children}</div>);
}function A2(props) {return (<div><h2>A2组件</h2>{/* 通过 props.children 接收 Parent组件传递过来的内容 */}{props.children}</div>);
}function B() {return (<div><h2>B组件</h2></div>);
}

2. 类组件形式

/*** 组件嵌套使用，使用 children props 通过组件标签体传入结构* Parent组件：通过闭合标签的形式进行 传值到子组件* A组件：通过 props.children 接收值*/
import React, { Component } from "react";export default class Parent extends Component {render() {return (<div><h2>Parent组件</h2><A1>{/* 传递的内容，可以是状态、参数 */}这里是内容</A1><A2>{/* 传递的内容，可以是组件 */}<B /></A2></div>);}
}class A1 extends Component {render() {return (<div><h2>A1组件</h2>{/* 通过 this.props.children 接收 Parent组件传递过来的内容 */}{this.props.children}</div>);}
}class A2 extends Component {render() {return (<div><h2>A2组件</h2>{/* 通过 this.props.children 接收 Parent组件传递过来的内容 */}{this.props.children}</div>);}
}class B extends Component {render() {return (<div><h2>B组件</h2></div>);}
}

二. render props

render prop 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。

render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

组件嵌套使用，使用 render props 通过组件标签属性传入结构,而且可以携带数据，一般用 render 函数属性。

1. 函数组件形式

/*** 组件嵌套使用，使用render props 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性*/
import React from "react";
import { useState } from "react";
export default function Parent() {return (<div><h2>Parent组件</h2>{/* 使用A组件，A组件中使用B组件，同时A组件传递数据到B组件 */}<A render={(data) => <B data={data}></B>}></A></div>);
}function A(props) {const [students, setStudents] = useState({id: 1,name: "小明",age: 18,});return (<div><h2>A组件</h2>{/* 展示B组件，同时传值（students） */}{props.render(students)}</div>);
}function B(props) {// 通过props.data(对应Parent组件中的属性名) 接收A组件传递的数据const person = props.data;return (<div><h2>B组件</h2><div>A组件传递的数据为：{person.id}——{person.name}——{person.age}</div></div>);
}

2. 类组件形式

/*** 组件嵌套使用，使用render props 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性*/
import React, { Component } from "react";export default class Parent extends Component {render() {return (<div><h2>Parent组件</h2>{/* 使用A组件，A组件中使用B组件，同时A组件传递数据到B组件 */}<A render={(data) => <B data={data}></B>}></A></div>);}
}class A extends Component {state = {students: {id: 1,name: "小明",age: 18,},};render() {console.log(this.props);const { students } = this.state;return (<div><h2>A组件</h2>{/* 展示B组件，同时传值（students） */}{this.props.render(students)}</div>);}
}class B extends Component {render() {// 通过this.props.data(对应Parent组件中的属性名) 接收A组件传递的数据const data = this.props.data;return (<div><h2>B组件</h2><div>A组件传递的数据为：{data.id}——{data.name}——{data.age}</div></div>);}
}

React - children props 与 render props相关推荐

React高级特性之Render Props
render prop是一个技术概念.它指的是使用值为function类型的prop来实现React component之间的代码共享. 如果一个组件有一个render属性,并且这个render属性的 ...
web前端高级React - React从入门到进阶之Render Props
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
React组件常用设计模式之Render Props
自己在总结最近半年的React开发最佳实践时,提到了Render Props,想好好写写,但感觉篇幅又太长,所以就有了此文.愿你看完,能有所收获,如果有什么不足或错误之处还请指正.文中所提到的所有代码 ...
React拾遗：Render Props及其使用场景
什么是 Render Props? 新的context api使用了render props: <ThemeContext.Consumer>{theme => (<butto ...
React Render Props 模式
为什么80%的码农都做不了架构师?>>> 概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件 ...
TypeScript + React 学习render props
###前言一直想学学TypeScript,尝试尝试带类型的js怎么写,有啥优点.正好这两天有时间结合着react写写小例子. 搭建环境不想折腾webpack来自己配ts+react的环境就用typ ...
React Render props
首先打个广告,系列文章: 古老的React mixins HOC(高阶组件) render props React Hooks 下面进入正题: 什么是Render props A render pro ...
React 中使用 render props
React 中使用 render props 前言正文結語前言這篇也是紀錄了關於學習 react 的過程,起因是因為開始學習 hooks,但是發現好像有些坑比較重要但卻被我跳過了,像是 ren ...
reactjs render props向组件内部动态传入带内容的标签
render props 如何向组件内部动态传入带内容的结构(标签)? Vue中: 使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A> Rea ...

React - children props 与 render props

React - children props 与 render props

一. children props

1. 函数组件形式

2. 类组件形式

二. render props

1. 函数组件形式

2. 类组件形式

React - children props 与 render props相关推荐

最新文章

热门文章