快捷導(dǎo)航

React插槽使用方法

更新時間：2021年12月17日 15:44:01 作者：有趣的老凌

本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

需求

我們自己寫了個組件，引用組件時想要在組件中寫入內(nèi)容，并且寫入的內(nèi)容可以被組件識別、控制，用過Vue的同學(xué)肯定會立刻想到slot插槽，react也支持插槽功能，下面我們用react開發(fā)一個支持插槽功能的組件。

核心思想

父組件在子組件中傳入的三個div，這三個div會默認(rèn)通過props傳到子組件中，然后我們在子組件中控制children的渲染即可。

核心代碼

// 015 使用插槽
import React  from 'react';
import ReactDOM from 'react-dom';
// 父組件
class ParentDom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            heardData:"頭部數(shù)據(jù)",
            footData:"底部數(shù)據(jù)",
            contentData:"內(nèi)容數(shù)據(jù)"
        }
    }
    componentDidMount() {
    }

    render() {
        return (
            <div>
                <h1>015使用插槽</h1>
                <ChildDom >
                    <div data-position="heard" >這是頭部</div>
                    <div data-position="content" >這是內(nèi)容 丨{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實現(xiàn)插槽的兩種方式

由于在React組件中寫的內(nèi)容會被掛載到props中，以此來實現(xiàn)類似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>
    )
  }
}

到此這篇關(guān)于React插槽使用方法的文章就介紹到這了,更多相關(guān)React插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: