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')
);