React中如何实现插槽功能

插槽的作用主要是为了让组件具有更强的通用性，使用者可以自定义组件要存放的内容。

在vue中我们可以通过用slot来实现这个需求，那么在React中怎么来实现呢？

React对于这种需要插槽的情况非常的灵活，有两种方案可以实现：

• 组件的children子元素;
• props属性传递React元素;

一、children实现插槽

每个组件都可以获取到props.children: 它包含组件的开始标签和结束标签之间的内容。

• Navbar组件

  export class Navbar extends PureComponent {
    render() {
      const { children } = this.props;
      return (
        <div>
          <h2>Navbar page</h2>
          <div className="nav-bar">
            <div className="left">{ children[0] }</div>
            <div className="center">{ children[1] }</div>
            <div className="right">{ children[2] }</div>
          </div>
        </div>
      );
    }
  }
  

• App组件

  ......
  render() {
      return (
        <div>
          <Navbar>
              <button>按钮</button>
              <h2>我是标题</h2>
              <span>内容</span>
          </Navbar>
        </div>
      );
    }
  

• 效果图 二、props实现具名插槽

通过children实现的方案虽然可行，但是不能准确的获取到传入的元素。

• 通过具体的属性名，可以让我们在传入或获取时更加的精准。

• Navbar2组件

  export class Navbar2 extends PureComponent {
    render() {
      const { leftSlot, centerSlot, rightSlot } = this.props;
      return (
        <div>
          <h2>Navbar2 page</h2>
          <div className="nav-bar">
            <div className="left">{ leftSlot }</div>
            <div className="center">{ centerSlot }</div>
            <div className="right">{ rightSlot }</div>
          </div>
        </div>
      );
    }
  }
  

• App组件

  ......
  render() {
      const leftSlot = <p>hello React</p>;
      const centerSlot = <button>我是按钮</button>;
      const rightSlot = <span>行内元素</span>
      return (
        <div>
          <Navbar2 leftSlot= {leftSlot} centerSlot= {centerSlot} rightSlot={rightSlot}>
          </Navbar2>
        </div>
      );
    }
  

• 效果图