react学习笔记（六）插槽、路由

学习教程https://www.bilibili.com/video/BV1T7411W72T?t=842&p=18

import React from 'react';
import ReactDOM from 'react-dom'

class ParentCom extends React.Component{

constructor(props){
  super(props)
  console.log(props)
}

  render(){
    return(
      <div>
        <h1>组件插槽</h1>
        {this.props.children}
      </div>
    )
  }
}

ReactDOM.render(<ParentCom>
    <h2>子组件1</h2>
    <h2>子组件2</h2>
    <h2>子组件3</h2>
  </ParentCom>
  ,document.getElementById("root"))

固定位置传递插槽

赋一个变量给识别标识，然后{}展示标识内容。

附上练习代码：

import React from 'react';
import ReactDOM from 'react-dom'

class HeaderCom extends React.Component{
  render(){
    return <div>header</div>
  }
}

class ContentCom extends React.Component{
  render(){
    return <div>content</div>
  }
}

class ParentCom extends React.Component{

  render(){
    let headerCom,contentCom;
    this.props.children.forEach((item,index)=>{
      if(item.props["data-position"]==="header"){
        headerCom=item
      }else{
        contentCom=item
      }
    })

    return(
      <div>
        <div>
          {headerCom}
        </div>
        <div>
          {contentCom}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<ParentCom>
    <HeaderCom data-position="header"></HeaderCom>
    <ContentCom data-position="content"></ContentCom>
  </ParentCom>
  ,document.getElementById("root"))

路由：
npm install react-router-dom

头部引入：
import React from ‘react’
// hash模式
// import {HashRouter as Router,Link, Route} from 'react-router-dom ’

//history模式/后端匹配使用
import {BrowserRouter as Router, link, Route} from ‘react-router-dom’

使用< Router>设置路由信息

class routerCom extends React.Component{
  render(){
    return(
      <div id="router">
        <Router>
          <div className="nav">
            <Link to = "/">Home</Link>
            <Link to = "/Product">Product</Link>
            <Link to = "/usercenter">Usercenter</Link>
          </div>
          <Route path='/'exact component={Home}></Route>
          <Route path='/product'component={Product}></Route>        
          <Route path='/usercenter'component={Usercenter}></Route>        
        </Router>
      </div>
    )
  }
}

exact是精确匹配的意思，否则底下的/也会匹配进去

会自动加上

可以传参数，使用props可以在子组件中获取，
传参数使用{}，里面是对象。

传参：
两种方式，第二种直接写，在match中拿到。


Switch(仅匹配一个）

组件之间的数据传递：

通过History

Redux：状态管理的一个解决方案。
没看先这个

SQL.js

只导出函数，之后只要引入然后就能使用这个函数了。

服务器使用：