快捷導(dǎo)航

React RenderProps模式運(yùn)用過(guò)程淺析

更新時(shí)間：2023年03月06日 09:20:54 作者：?QSω[*邱╭

render props是指一種在 React 組件之間使用一個(gè)值為函數(shù)的 prop 共享代碼的技術(shù)。簡(jiǎn)單來(lái)說(shuō)，給一個(gè)組件傳入一個(gè)prop，這個(gè)props是一個(gè)函數(shù)，函數(shù)的作用是用來(lái)告訴這個(gè)組件需要渲染什么內(nèi)容，那么這個(gè)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>
		)
	}
}

結(jié)果很簡(jiǎn)單就能猜到

改一下呢？

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>
		)
	}
}

頁(yè)面是沒(méi)有現(xiàn)實(shí)Hello !的，但是之前一次的封裝NaLink也有傳遞過(guò)標(biāo)簽體內(nèi)容的，在子組件的props中，children:(內(nèi)容)

所以A組件想要展示傳遞的標(biāo)簽體內(nèi)容的話，還要改一下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組件之間調(diào)用要注意：

Parent組件中，render（當(dāng)然可以去其他的名字這里）這樣寫(xiě)，相當(dāng)于預(yù)留了一個(gè)插槽，如果你需要渲染其他組件（例如例子中的B組件），在A組件中調(diào)用this.props.render()就可以渲染出B組件，不寫(xiě)的話就不會(huì)渲染出B組件