React插槽使用

image.png

children实现插槽

image.png

有多个的化，children就算数组

        
          1
          2
          3
        
--------------------------
    return (
      

        
{this.props.children[0]}
        
{this.props.children[1]}
        
{this.props.children[2]}
      
    );

image.png

只有一个的话，就直接用children

    
          1
        
-----------------------------------------
    return (
      

        
{this.props.children}
      
    );

image.png

如果只想让别人传一个的化，就给children添加属性。

import React, { Component } from "react";
import "./Hello.css";
import PropTypes from "prop-types";
export class Hello extends Component {
  render() {
    console.log(this.props); //{children: Array(3)}
    return (
      

        
{this.props.children[0]}
        
{this.props.children[1]}
        
{this.props.children[2]}
      
    );
  }
}
Hello.propTypes = {
  children: PropTypes.element,
};

export default Hello;

这样传多个的化，就会报错。

image.png

如果想传入多个

Hello.propTypes = {
  children: PropTypes.array,
};

这个时候传入一个button就会报错。

这种方法对index要求很高，使用的chilfren的索引错了，最后渲染的位置就错了。

props实现插槽（推荐）

image.png

export class App extends Component {
  render() {
    return (
      

        1
}
          rightSlot={
2
}
          centerSlot={
3
}
        >
      

); }

import React, { Component } from "react";
import "./Hello.css";
import PropTypes from "prop-types";
export class Hello extends Component {
  render() {
    const { leftSlot, rightSlot, centerSlot } = this.props;
    return (
      

        
{leftSlot}
        
{centerSlot}
        
{rightSlot}
      
    );
  }
}
Hello.propTypes = {
  children: PropTypes.array,
};

export default Hello;

也可以写成变量形式

import React, { Component } from "react";
import Hello from "./components/Hello/index";

export class App extends Component {
  render() {
    const leftSlot = 
1
;
    const rightSlot = 
2
;
    const centerSlot = 
3
;
    return (
      

        
      
    );
  }
}

export default App;

作用域插槽

   this.tabClick(i)}
           itemType={item => {item}}
        />


子组件
  {itemType(item)}

import React, { Component } from 'react'
import TabControl from './TabControl'

export class App extends Component {
  constructor() {
    super()

    this.state = {
      titles: ["流行", "新款", "精选"],
      tabIndex: 0
    }
  }

  tabClick(tabIndex) {
    this.setState({ tabIndex })
  }

  getTabItem(item) {
    if (item === "流行") {
      return {item}
    } else if (item === "新款") {
      return {item}
    } else {
      return {item}
    }
  }

  render() {
    const { titles, tabIndex } = this.state

    return (
      

         this.tabClick(i)}
          // itemType={item => {item}}
          itemType={item => this.getTabItem(item)}
        />
        
{titles[tabIndex]}
      
    )
  }
}

export default App

import React, { Component } from 'react'
import "./style.css"

export class TabControl extends Component {
  constructor() {
    super()

    this.state = {
      currentIndex: 0
    }
  }

  itemClick(index) {
    // 1.自己保存最新的index
    this.setState({ currentIndex: index })

    // 2.让父组件执行对应的函数
    this.props.tabClick(index)
  }

  render() {
    const { titles, itemType } = this.props
    const { currentIndex } = this.state

    return (
      

        {
          titles.map((item, index) => {
            return (
              
 this.itemClick(index)}
              >
                {/* {item} */}
                {itemType(item)}
              
            )
          })
        }
      
    )
  }
}

export default TabControl