react知识

react-dom是用于web网页开发的，react-native是用于app开发的

<>//唯一根元素可以用空标签
    <div>hello</div>
    <div>world</div>
</>
import React,{Fragment} from 'react'
<Fragment>//也可以用Fragment标签，这些标签不会被渲染
    <div>hello</div>
    <div>world</div>
</Fragment>
<img src="favicon.ico"/>//public下的静态资源的引用路径
<img src={require('@/assets/logo512.png')}/>
                <img src={this.state.imgUrl}/>

• 子向父传值

<div onClick={this.props.fun.bind(this,'from about')}>about</div>//子组件中触发父组件传过来的方法
<About fun={this.pass}></About>
pass(e){
    console.log(e);
}

• 兄弟传值(尝试点击Brotherone后点击Brothertwo)

const PubSub = require('pubsub-js');
<div onClick={this.fun}>Brotherone</div>
fun(){
    PubSub.publish('TOPIC', 'hello world!');
}
<div onClick={this.fun}>Brothertwo</div>
fun(){
    PubSub.subscribe('TOPIC', (e,data)=>{
        console.log(e,data)
    });
}

• 模拟服务器数据

cnpm i json-server -g
切换到data.json文件的目录下
运行json-server data.json --port 4000

navlink自动有个动态的active的class，我们可以在这上面写.active{}样式

import {BrowserRouter,HashRouter} from 'react-router-dom'
<BrowserRouter>
    <App />//hash或browser路由将整个应用包裹起来
  </BrowserRouter>,
  document.getElementById('root')

return (//循环
            <div>
                {this.state.arr.map((item,index)=>{
                    return <div>
                        <span>{item+','+index}</span>
                    </div>
                })}
            </div>
        )