React实现插槽（solt）

1.插槽的概念

例如网站导航栏设置，不同的页面拥有不同的导航需求，但是导航结构都是相似的，都是三栏布局。我们不可能每一个页面设置一个组件来进行开发，这样组件的复用性太差，所以在此我们引入插槽。但是react中并没有插槽的概念，归功于强大的jsx。

2.案例说明

在NavBar组件中，如果我们这样写：

 <NavBar>
     <span>aaaa</span>
     <strong>bbbb</strong>
     <a href='/#'>cccc</a>
 </NavBar>

相当于将aaa,bbb,ccc都以不同的样式插入到组件<NavBar>中，都封装在this.props.children中。

但是上述例子数据是固定的，大多数时候我们需要进行渲染的数据是不固定的，我们将如何进行渲染呢？

import React, { Component } from 'react'

export default class NavBar2 extends Component {
  render() {
    const {left,center,right} = this.props
    return (
      <div className='nav-bar'>
        <div className='nav-left'>{left}</div>
        <div className='nav-center'>{center}</div>
        <div className='nav-right'>{right}</div>
      </div>
    )
  }
}

在组件NavBar2中，渲染内容大致分为3个部分nav-left,nav-center,nav-right。

import React, { Component } from 'react'
import NavBar2 from './NavBar2'
export default class App extends Component {
    render() {
        return (
            <div>    
                <NavBar2 left={<span>aaaa</span>}
                    center={<strong>bbbb</strong>}
                    right={<a href='/#'>cccc</a>} />
            </div>

        )
    }
}

可以通过上述方式对组件的内容进行插入。

 详细内容：参考react官网

 深入 JSX – React