slot插槽

很多时候，我们封装了一个子组件之后，在父组件使用的时候，想添加一些dom元素，这个时候就可以使用slot插槽了，但是这些dom是否显示以及在哪里显示，则是看子组件中slot组件的位置了。

比如看下面的例子：

function Navbar (props) {
  return (

    <div>
      Navbar--{props.children}
    </div>

  )
}

class App extends Component {
  state = { 

    isShow:true
    }

  render() {

    return (
      <div>
        hello App
        <Navbar>
          <button onClick={
            ()=>{
              this.setState({
                isShow:!this.state.isShow
              })
            }
          }>click</button>
        </Navbar>
      </div>    
    );

  }
}

props. children 存放的是插槽里面预留的react标签，此时代表的是button，Sidebar

动态组件

动态组件：根据状态的不同，动态地切换组件状态显示与否。

适用场景：在没引入路由/引入路由后(不更新路由)情况下，在某个小的选项卡，比如底部菜单栏Navbar，点击切换每个选项

class Home extends Component {
  state = {  }
  render() {

    return (
      <div>
        Home
      </div>
    );

  }
}
class List extends Component {
  List
  ... 
}
class Shopcar extends Component {
  Shopcar
  ... 
}

class App extends Component {
  state = { 

    which:'home'
    }

  render() {

    return (
      <div>
        <ul>
          <li onClick={ () => {
            this.setState({
              which:'home'
            })
          }}>home</li>
          <li onClick={ () => {
            this.setState({
              which:'list'
            })
          }}>list</li>
          <li onClick={ () => {
            this.setState({
              which:'shopcar'
            })
          }}>shopcar</li>
        </ul>
        {this.whichComponent()}
      </div>            
    );

  }

  whichComponent(){

    switch (this.state.which) {
      case 'home':
        return <Home/>
      case 'list':
        return <List/>
      case 'shopcar':
        return <Shopcar/>
      default :
        return <Home/>
    }

  }
}

点击home，切换Home组件...