React插槽使用方法
需求
我們自己寫瞭個組件,引用組件時想要在組件中寫入內容,並且寫入的內容可以被組件識別、控制,用過Vue的同學肯定會立刻想到slot插槽,react也支持插槽功能,下面我們用react開發一個支持插槽功能的組件。
核心思想
父組件在子組件中傳入的三個div,這三個div會默認通過props傳到子組件中,然後我們在子組件中控制children的渲染即可。
核心代碼
// 015 使用插槽 import React from 'react'; import ReactDOM from 'react-dom'; // 父組件 class ParentDom extends React.Component { constructor(props) { super(props) this.state = { heardData:"頭部數據", footData:"底部數據", contentData:"內容數據" } } componentDidMount() { } render() { return ( <div> <h1>015使用插槽</h1> <ChildDom > <div data-position="heard" >這是頭部</div> <div data-position="content" >這是內容 丨{this.state.contentData}</div> <div data-position="foot" >這是底部</div> </ChildDom> </div> ) } } // 子組件 class ChildDom extends React.Component { constructor(props) { super(props) } render() { let heard,content,foot; this.props.children.forEach(item =>{ if(item.props['data-position'] == 'heard'){ heard = item }else if(item.props['data-position'] == 'content'){ content = item }else if(item.props['data-position'] == 'foot'){ foot = item } }) return ( <div > <p>我是子組件</p> <div className="heard"> {heard} </div> <div className="content"> {content} </div> <div className="foot"> {foot} </div> </div> ) } } export default function () { ReactDOM.render( <ParentDom />, document.querySelector("#example15") ); }
展示效果
React實現插槽的兩種方式
由於在React組件中寫的內容會被掛載到props中,以此來實現類似vue中的插槽功能
這是最外層代碼
import React, { Component } from 'react' import NavBar from './NavBar' import NavBar2 from './NavBar2' export default class App extends Component { render() { return ( <div> <NavBar> <span>aaa</span> <strong>bbb</strong> <a href="/#" rel="external nofollow" rel="external nofollow" >ccc</a> </NavBar> <NavBar2 leftslot={<span>aaa</span>} centerslot={<strong>bbb</strong>} rightslot={<a href="/#" rel="external nofollow" rel="external nofollow" >ccc</a>}/> </div> ) } }
1.用this.props.children[index]
import React, { Component } from 'react' import './style.css' export default class NavBar extends Component { render () { return ( <div className="nav-bar"> <div className="nav-left"> {this.props.children[0]} </div> <div className="nav-center"> {this.props.children[1]} </div> <div className="nav-right"> {this.props.children[2]} </div> </div> ) } }
2.用直接命名方式
import React, { Component } from 'react' import './style.css' export default class NavBar extends Component { render () { const {leftslot, centerslot,rightslot} = this.props return ( <div className="nav-bar"> <div className="nav-left"> {leftslot} </div> <div className="nav-center"> {centerslot} </div> <div className="nav-right"> {rightslot} </div> </div> ) } }
到此這篇關於React插槽使用方法的文章就介紹到這瞭,更多相關React插槽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- React實現類似於Vue中的插槽的項目實踐
- React 高階組件HOC用法歸納
- react實現移動端二級路由嵌套詳解
- 使用 TypeScript 開發 React 函數式組件
- React創建對話框組件的方法實例