React RenderProps模式如何运用

本文小编为大家详细介绍“React RenderProps模式如何运用”，内容详细，步骤清晰，细节处理妥当，希望这篇“React RenderProps模式如何运用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1.引入

上代码：

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h4>我是Parent组件</h4>
				<A/>
			</div>
		)
	}
}
class A extends Component {
	render() {
		console.log(this.props);
		return (
			<div className="a">
				<h4>我是A组件</h4>
			</div>
		)
	}
}

结果很简单就能猜到

改一下呢？

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h4>我是Parent组件</h4>
				<A>Hello !</A>
			</div>
		)
	}
}
class A extends Component {
	render() {
		console.log(this.props);
		return (
			<div className="a">
				<h4>我是A组件</h4>
			</div>
		)
	}
}

页面是没有现实Hello !的，但是之前一次的封装NaLink也有传递过标签体内容的，在子组件的props中，children:(内容)

所以A组件想要展示传递的标签体内容的话，还要改一下A组件

class A extends Component {
	render() {
		console.log(this.props);
		return (
			<div className="a">
				<h4>我是A组件</h4>
				{this.props.children}
			</div>
		)
	}
}

2.改一下呢

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h4>我是Parent组件</h4>
				<A>
					<B/>
				</A>
			</div>
		)
	}
}
class A extends Component {
	state ={ name:'Mike'}
	render() {
		console.log(this.props);
		return (
			<div className="a">
				<h4>我是A组件</h4>
				{this.props.children}
			</div>
		)
	}
}
class B extends Component {
	render() {
		console.log('B--render');
		return (
			<div className="b">
				<h4>我是B组件</h4>
			</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">
				<h4>我是Parent组件</h4>
				<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">
				<h4>我是A组件</h4>
				{this.props.render(name)}
			</div>
		)
	}
}
class B extends Component {
	render() {
		console.log('B--render');
		return (
			<div className="b">
				<h4>我是B组件,接收到的name:{this.props.name}</h4>
			</div>
		)
	}
}

主要是Parent组件和A组件之间调用要注意：

Parent组件中，render（当然可以去其他的名字这里）这样写，相当于预留了一个插槽，如果你需要渲染其他组件（例如例子中的B组件），在A组件中调用this.props.render()就可以渲染出B组件，不写的话就不会渲染出B组件。

读到这里，这篇“React RenderProps模式如何运用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。