欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React RenderProps模式運用過程淺析

 更新時間:2023年03月06日 09:20:54   作者:?QSω[*邱╭  
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說,給一個組件傳入一個prop,這個props是一個函數(shù),函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容,那么這個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é)果很簡單就能猜到

改一下呢?

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

頁面是沒有現(xiàn)實Hello !的,但是之前一次的封裝NaLink也有傳遞過標簽體內(nèi)容的,在子組件的props中,children:(內(nèi)容)

所以A組件想要展示傳遞的標簽體內(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(當然可以去其他的名字這里)這樣寫,相當于預留了一個插槽,如果你需要渲染其他組件(例如例子中的B組件),在A組件中調(diào)用this.props.render()就可以渲染出B組件,不寫的話就不會渲染出B組件

4.總結(jié)一下

如何向組件內(nèi)部動態(tài)傳入帶內(nèi)容的結(jié)構(gòu)(標簽)

Vue中:

使用slot技術(shù), 也就是通過組件標簽體傳入結(jié)構(gòu)

React中:

使用children props: 通過組件標簽體傳入結(jié)構(gòu)

使用render props: 通過組件標簽屬性傳入結(jié)構(gòu), 一般用render函數(shù)屬性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
問題: 如果B組件需要A組件內(nèi)的數(shù)據(jù), ==> 做不到 

render props

<A render={(data) => <C data={data}></C>}></A>
A組件: {this.props.render(內(nèi)部state數(shù)據(jù))}
C組件: 讀取A組件傳入的數(shù)據(jù)顯示 {this.props.data} 

到此這篇關(guān)于React RenderProps模式運用過程淺析的文章就介紹到這了,更多相關(guān)React RenderProps內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React實現(xiàn)導入導出Excel文件

    React實現(xiàn)導入導出Excel文件

    本文主要介紹了React實現(xiàn)導入導出Excel文件,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2021-07-07
  • React處理復雜圖片樣式的方法詳解

    React處理復雜圖片樣式的方法詳解

    這篇文章主要為大家詳細介紹了React處理復雜圖片樣式的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-04-04
  • React路由中的redux和redux知識點拓展

    React路由中的redux和redux知識點拓展

    這篇文章主要介紹了React路由中的redux和redux知識點拓展,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,感興趣的朋友可以參考學習一下
    2022-08-08
  • ReactJS中使用TypeScript的方法

    ReactJS中使用TypeScript的方法

    TypeScript 實際上就是具有強類型的 JavaScript,可以對類型進行強校驗,好處是代碼閱讀起來比較清晰,代碼類型出現(xiàn)問題時,在編譯時就可以發(fā)現(xiàn),而不會在運行時由于類型的錯誤而導致報錯,這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下
    2024-04-04
  • React中useTransition鉤子函數(shù)的使用詳解

    React中useTransition鉤子函數(shù)的使用詳解

    React?18的推出標志著React并發(fā)特性的正式到來,其中useTransition鉤子函數(shù)是一個重要的新增功能,下面我們就來學習一下useTransition鉤子函數(shù)的具體使用吧
    2024-02-02
  • ES6 class類鏈式繼承,實例化及react super(props)原理詳解

    ES6 class類鏈式繼承,實例化及react super(props)原理詳解

    這篇文章主要介紹了ES6 class類鏈式繼承,實例化及react super(props)原理,結(jié)合實例形式詳細分析了ES6 中class類鏈式繼承,實例化及react super(props)原理相關(guān)概念、原理、定義與使用技巧,需要的朋友可以參考下
    2020-02-02
  • React?Hooks?實現(xiàn)的中文輸入組件

    React?Hooks?實現(xiàn)的中文輸入組件

    這篇文章主要為大家介紹了React?Hooks實現(xiàn)的中文輸入組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • React中Refs的使用場景及核心要點詳解

    React中Refs的使用場景及核心要點詳解

    在使用?React?進行開發(fā)過程中,或多或少使用過?Refs?進行?DOM?操作,這篇文章主要介紹了?Refs?功能和使用場景以及注意事項,希望對大家有所幫助
    2023-07-07
  • React Native 圖片查看組件的方法

    React Native 圖片查看組件的方法

    這篇文章主要介紹了React Native 圖片查看組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • 解決React報錯No duplicate props allowed

    解決React報錯No duplicate props allowed

    這篇文章主要為大家介紹了React報錯No duplicate props allowed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12

最新評論