• React使用笔记2--创建登录组件

    文章目录

    最近在学习使用React作为前端的框架，《React使用笔记》系列用于记录过程中的一些使用和解决方法。
    本文记录搭建登录页面的过程。

    根据产品规划划分模块

    主要页面逻辑

    在这里，本骚年就建一个比较简单的项目。该项目与之前的Angular使用笔记项目长得完全一致，但我们这里用React来实现吧。

    • 我们的主要页面逻辑如下：
      • 1.登录页面，输入账号和密码即可
      • 2.模块页面

    创建登录页面

    • 首先我们在components文件夹内添加一个login.jsx
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import React from 'react';
    const Login = React.createClass({
      render() {
        return (
          <div className="container" id="login">
            <form id="login-form">
              <h3 className="text-center">login</h3>
              <div className="form-group">
                <label>account</label>
                <input type="text" className="form-control" placeholder="Account" ref="loginName" required />
              </div>
              <div className="form-group">
                <label>Password</label>
                <input type="password" className="form-control" placeholder="Password" ref="loginPwd" required />
              </div>
              <button type="submit"  className="btn btn-default" onClick={this.loginSubmit}>登录</button>
            </form>
          </div>
        )
      }
    });
    module.exports = Login;
    • 在jsx中，因为js中class为保留字，所以要写成className
    • 此处引用了Bootstrap的样式，在templates/index.ejs中添加
    1
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

    React Router

    安装使用

    • 通过npm安装
    1
    $ npm install history react-router@latest
    • 还需要安装history，它也是React Router的依赖，且在npm 3+下不会自动安装
    1
    $ npm install --save history
    • 添加Route组件
    1
    import { Router, Route, Link, hashHistory, IndexRoute } from 'react-router';

    React Router组件

    • Router组件
      Router组件本身只是一个容器，真正的路由要通过Route组件定义。

    • Route组件
      Route组件还可以嵌套。

      1
      2
      3
      4
      5
      <Router history={hashHistory}>
        <Route path="/" component={App}>
          <Route path="/repos" component={Repos}/>
        </Route>
      </Router>

    • Link组件
      Link组件用于取代元素，生成一个链接，允许用户点击后跳转到另一个路由，可接收Router的状态。

    • IndexLink组件
      如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件。
    • IndexRoute组件
      IndexRoute显式指定Home是根路由的子组件，即指定默认情况下加载的子组件，即该路径的index.html。
    • Redirect组件
      Redirect组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
    • IndexRedirect组件
      IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。

    path属性

    Route组件的path属性指定路由的匹配规则。
    path属性可以使用相对路径（不以/开头），匹配时就会相对于父组件的路径。

    • :paramName
      • 匹配URL的一个部分，直到遇到下一个/、?、#为止。
      • 这个路径参数可以通过this.props.params.paramName取出。
    • ()
      • ()表示URL的这个部分是可选的。
    • 匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

    **匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

    Histories

    React Router是建立在history之上的。 简而言之，一个history知道如何去监听浏览器地址栏的变化，并解析这个URL转化为location对象，然后router使用它匹配到路由，最后正确地渲染对应的组件。

    • createHashHistory
      • 这是一个你会获取到的默认history，如果你不指定某个history（即 {/ your routes /}）。
      • 它用到的是URL 的hash（#）部分去创建形如examp 大专栏  React使用笔记2--创建登录组件le.com/#/some/path的路由。
      • ?_k=ckuvup是每一个location创建的一个唯一的key，并把它们的状态存储在session storage中。当访客点击“后退”和“前进”时，我们就会有一个机制去恢复这些location state。可使用queryKey: false关闭。
    • createBrowserHistory
      • Browser history使用History API在浏览器中被创建用于处理URL，新建一个像这样真实的URL example.com/some/path。
      • 使用Browser history需要在服务器进行配置。
    • createMemoryHistory
      • Memory history不会在地址栏被操作或读取。

    js中设置跳转

    • 使用browserHistory.push
    1
    2
    3
    4
    import { browserHistory } from 'react-router';
    example(event) {
      browserHistory.push(path);
    }
    • 使用context对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    export example React.createClass({
      
      contextTypes: {
        router: React.PropTypes.object
      },
      example(event) {
        this.context.router.push(path)
      },
    })

    添加路由

    在index.js设置路由

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import { Router, Route, Link, hashHistory, IndexRoute, useRouterHistory } from 'react-router'; //router组件
    import { createHistory, createHashHistory } from 'history'; //history组件
    import Login from  './components/login.jsx'; //login自定义组件
    import Index from  './components/index.jsx'; //index自定义组件
    let history = useRouterHistory(createHashHistory)({ queryKey: false });
    //将其渲染到页面上id为test的DOM元素内
    ReactDOM.render(<Router history={history}>
        <Route path="/">
          <Route path="index" component={Index} />
          <IndexRoute component={Login} />
        </Route>
      </Router>, 
    document.body);

    在components里login.ejs添加路由跳转

    • 添加登录按钮的click事件
    • 添加loginSubmit属性以及跳转
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    import React from 'react'; //导入react组件
    const Login = React.createClass({
      contextTypes: {
        router: React.PropTypes.object
      },
      loginSubmit: function() {
        this.context.router.push('/index'); //使用this.content进行跳转
      },
      render() {
        return (
          <div className="container" id="login">
            <form id="login-form">
              <h3 className="text-center">login</h3>
              <div className="form-group">
                <label>account</label>
                <input type="text" className="form-control" placeholder="Account" ref="loginName" required />
              </div>
              <div className="form-group">
                <label>Password</label>
                <input type="password" className="form-control" placeholder="Password" ref="loginPwd" required />
              </div>
              <button type="submit"  className="btn btn-default" onClick={this.loginSubmit}>登录</button>
            </form>
          </div>
        )
      }
    });
    module.exports = Login;

    结束语

    从Angular转React中遇到不少问题呢，毕竟两者很多概念和使用方法都很不一样，使用过程中也是大开眼界了呀。
    此处查看项目代码（仅包含app部分）
    此处查看页面效果

    查看Github有更多内容噢：https://github.com/godbasin
    更欢迎来被删的前端游乐场边撸猫边学前端噢

  • 相关阅读:
    使用Nginx搭建http服务器
    （七）Docker搭建httpd集群
    zlib库对文件进行压缩和解压操作
    （一）Apache Thrift 的使用
    （一）select、poll、epoll
    （十三）备忘录模式
    （十二）命令模式
    （十一）迭代器模式
    centos下利用httpd搭建http服务器方法
    shell快捷键
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12284897.html
Copyright © 2020-2023  润新知