reactjs render props向组件内部动态传入带内容的标签
生活随笔
收集整理的這篇文章主要介紹了
reactjs render props向组件内部动态传入带内容的标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
render props
如何向組件內部動態傳入帶內容的結構(標簽)?
Vue中: 使用slot技術, 也就是通過組件標簽體傳入結構 <A><B/></A> React中:使用children props: 通過組件標簽體傳入結構使用render props: 通過組件標簽屬性傳入結構,而且可以攜帶數據,一般用render函數屬性children props
<A><B>xxxx</B> </A> {this.props.children} 問題: 如果B組件需要A組件內的數據, ==> 做不到render props
<A render={(data) => <C data={data}></C>}></A> A組件: {this.props.render(內部state數據)} C組件: 讀取A組件傳入的數據顯示 {this.props.data}總結
以上是生活随笔為你收集整理的reactjs render props向组件内部动态传入带内容的标签的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: reactjs组件优化:setState
- 下一篇: reactjs错误边界:用来捕获后代组件