React学习之路

搭建一个全局的脚手架 npm install -g create-react-app

src/index.js相当于vue里的main.js

src/App.js相当于vue里的App.vue

写类名必须得是className而不是class

src/index.css是全局的样式  页面样式是就近原则  App.js首先用App.css的样式，App.css是组件的样式，index.css是全局的样式。

配置路由

在App.js里面配置

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

import Home from './pages/Home/index';
import My from './pages/My/index';
import Cart from './pages/Cart/index';

import './App.css';

function App() {
  return (
    <div>
      <Router>
       <Route path="/" component={Home}></Route>
       <Route path='/my' component={My}></Route>
       <Route path='/Cart' component={Cart}></Route>
    </Router>
    </div>
  )
}

export default App;

以上就是一个简单的App.js的配置

在页面的相互跳转中 首页就是Home组件配置的路由是/ 那么在从首页跳转其他页面的时候会保留首页的展示内容  

这是因为Home组件所在路由的 path为 “/”，而其他组件开头包含了 “/”，React就会默认渲染Home组件。

如果想在访问其他地址时不显示Home组件，可以在Home组件所在Route标签中加入 exact ，

<Route exact path="/" component={Home}></Route>

这样访问其他非Home页面就不会展示Home的内容了

事件绑定

事件绑定需要.bind(this)

import React, { Component } from 'react';
import { Link } from 'react-router-dom';


class Home extends Component {
    // 点击跳转个人中心
    jumpToMy (){
        this.props.history.push({pathname: '/My',query: {name:'kiki'}})
    }
    render (){
        return (
            <div>
                <div>Home</div>
                <div onClick={this.jumpToMy.bind(this)}>click Me to 个人中心！</div>
                <Link to="/Cart">购物车</Link>
            </div>
        )
    }
}

export default Home

路由跳转及传参参考链接：https://www.cnblogs.com/huihuihero/p/12165344.html

父子组件的传参

父组件向子组件传参

class My extends Component {
    constructor (){
        super()
        this.state = {
            componentName: '这个是这个是这个是'
        }
    }
    render (){
        return (
            <div>
                <div>My</div>
                <br />
                <div onClick={this.changeName.bind(this)}>修改啊修改</div>
                <MyCon name={this.state.componentName} />
            </div>
        )
    }
}

子组件向父组件传参  子组件代码

import React, { Component } from 'react';

class MyCon extends Component {
    render (){
        return (
            <div>
                <br/>
                <div onClick={this.parent.bind(this)}>I am My's {this.props.name}~</div>
            </div>
        )
    }
    // 点击向父组件传参
    parent (){
        this.props.parentClick('我 子组件给父组件修改了name值')
    }
}

export default MyCon

父组件接收

class My extends Component {
    constructor (){
        super()
        this.state = {
            componentName: '这个是这个是这个是'
        }
    }
    render (){
        return (
            <div>
                <div>My</div>
                <br />
                <div onClick={this.changeName.bind(this)}>修改啊修改</div>
                <MyCon name={this.state.componentName} parentClick={this.fn.bind(this)} />
            </div>
        )
    }
    // 子组件向父组件传参
    fn (data){
        this.setState({
            componentName: data
        })
    }
}

到此 父子组件传参就完成喽~