React RenderProps模式運用過程淺析
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中useTransition鉤子函數(shù)的使用詳解
React?18的推出標志著React并發(fā)特性的正式到來,其中useTransition鉤子函數(shù)是一個重要的新增功能,下面我們就來學習一下useTransition鉤子函數(shù)的具體使用吧2024-02-02ES6 class類鏈式繼承,實例化及react super(props)原理詳解
這篇文章主要介紹了ES6 class類鏈式繼承,實例化及react super(props)原理,結(jié)合實例形式詳細分析了ES6 中class類鏈式繼承,實例化及react super(props)原理相關(guān)概念、原理、定義與使用技巧,需要的朋友可以參考下2020-02-02解決React報錯No duplicate props allowed
這篇文章主要為大家介紹了React報錯No duplicate props allowed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12