zoukankan      html  css  js  c++  java
  • 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
            })
        }
    }

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

  • 相关阅读:
    [转]String.getBytes()和new String()
    [转]文件加密和数字签名技术概述
    [转]Java获取当前路径
    Jaxb笔记
    [转]Hibernate重要规则总结
    [转]Hibernate3如何解决n+1 selects
    将win7电脑无线网变身WiFi热点,让手机、笔记本共享上网 (转)
    项目打包安装到未越狱的机器
    回调函数、消息和事件例程
    iPhone与iPad开发实战读书笔记
  • 原文地址:https://www.cnblogs.com/wxy0/p/14447328.html
Copyright © 2011-2022 走看看