image.png

children实现插槽

image.png

有多个的化，children就算数组

        <Hello>
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </Hello>
--------------------------
    return (
      <div className="box">
        <div className="left">{this.props.children[0]}</div>
        <div className="center">{this.props.children[1]}</div>
        <div className="right">{this.props.children[2]}</div>
      </div>
    );

image.png

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

    <Hello>
          <button>1</button>
        </Hello>
-----------------------------------------
    return (
      <div className="box">
        <div className="left">{this.props.children}</div>
      </div>
    );

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 (
      <div className="box">
        <div className="left">{this.props.children[0]}</div>
        <div className="center">{this.props.children[1]}</div>
        <div className="right">{this.props.children[2]}</div>
      </div>
    );
  }
}
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 (
      <div>
        <Hello
          leftSlot={<div>1</div>}
          rightSlot={<div>2</div>}
          centerSlot={<div>3</div>}
        ></Hello>
      </div>
    );
  }

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 (
      <div className="box">
        <div className="left">{leftSlot}</div>
        <div className="center">{centerSlot}</div>
        <div className="right">{rightSlot}</div>
      </div>
    );
  }
}
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 = <div>1</div>;
    const rightSlot = <div>2</div>;
    const centerSlot = <div>3</div>;
    return (
      <div>
        <Hello
          leftSlot={leftSlot}
          rightSlot={rightSlot}
          centerSlot={centerSlot}
        ></Hello>
      </div>
    );
  }
}

export default App;

作用域插槽

  <TabControl 
          titles={titles} 
          tabClick={i => this.tabClick(i)}
           itemType={item => <button>{item}</button>}
        />


子组件
  {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 <span>{item}</span>
    } else if (item === "新款") {
      return <button>{item}</button>
    } else {
      return <i>{item}</i>
    }
  }

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

    return (
      <div className='app'>
        <TabControl 
          titles={titles} 
          tabClick={i => this.tabClick(i)}
          // itemType={item => <button>{item}</button>}
          itemType={item => this.getTabItem(item)}
        />
        <h1>{titles[tabIndex]}</h1>
      </div>
    )
  }
}

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 (
      <div className='tab-control'>
        {
          titles.map((item, index) => {
            return (
              <div 
                className={`item ${index === currentIndex?'active':''}`} 
                key={item}
                onClick={e => this.itemClick(index)}
              >
                {/* <span className='text'>{item}</span> */}
                {itemType(item)}
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default TabControl