React-插槽

React插槽

插槽用于组件中预留位置，就可以添加内容，这些内容可以被识别和控制，React需要自己开发支持插槽功能
原理：组件中写入的HTML，可以传入到props

先看下面代码，直接写内容在组件内是不起作用的，这时候在组件中输出props

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class ParentCom extends React.Component {
     
  render() {
     
    console.log(this.props);
    return (
      <div>
        React插槽练习
      </div>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <ParentCom>
      <p>插槽内容1</p>
      <p>插槽内容2</p>
      <p>插槽内容3</p>
    </ParentCom>
  </React.StrictMode>,
  document.getElementById('root')
);

通过this.props.children可以获取到组件传过来的dom结构，这时候，可以通过{}进行渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class ParentCom extends React.Component {
     
  render() {
     
    console.log(this.props);
    return (
      <div>
        React插槽练习
        {
     this.props.children}
      </div>
    )
  }
}




ReactDOM.render(
  <React.StrictMode>
    <ParentCom>
      <p>插槽内容1</p>
      <p>插槽内容2</p>
      <p>插槽内容3</p>
    </ParentCom>
  </React.StrictMode>,
  document.getElementById('root')
);

通过props获取dom结构的时候，还可以传递值

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class ParentCom extends React.Component {
     
  render() {
     
    console.log(this.props);
    return (
      <div>
        React插槽练习
        {
     this.props.children}
      </div>
    )
  }
}


ReactDOM.render(
  <React.StrictMode>
    <ParentCom>
      <p data-name="first">插槽内容1</p>
      <p data-name="second">插槽内容2</p>
      <p data-name="third">插槽内容3</p>
    </ParentCom>
  </React.StrictMode>,
  document.getElementById('root')
);

对于内容需要放置在不同的位置，例如放在头部、主体、尾部的情况，可以通过在dom结构中添加标识符的形式，在组件中使用for循环匹配即可

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class ParentCom extends React.Component {
     
  render() {
     
    return (
      <div>
        React插槽练习
        <Childrencom>
          <h1 data-name='header'>这是头部内容</h1>
          <h1  data-name='main'>这是主体内容</h1>
          <h1 data-name='footer'>这是尾部内容</h1>
        </Childrencom>
      </div>
    )
  }
}

class Childrencom extends React.Component {
     
  constructor(props) {
     
    super(props)
    this.state = {
     
      header: '',
      main: '',
      footer: ''
    }
  }
  // 在界面渲染使用
  componentDidMount() {
     
    // 循环匹配内容
    console.log(this.props.children);
    this.props.children.forEach((item, index) => {
     
      if (item.props['data-name'] === 'header') {
     
        this.setState({
     
          header: item
        })
      } else if (item.props['data-name'] === 'main') {
     
        this.setState({
     
          main: item
        })
      } else {
     
        this.setState({
     
          footer: item
        })
      }
    })
  }
  render() {
     
    return (
      <div>
        <div>
          {
     this.state.header}
        </div>
        <div>
          {
     this.state.main}
        </div>
        <div>
          {
     this.state.footer}
        </div>
      </div>
    )
  }
}


ReactDOM.render(
  <React.StrictMode>
    <ParentCom></ParentCom>
  </React.StrictMode>,
  document.getElementById('root')
);