React 实践项目（四）

2024年3月13日 104次阅读来源: Yuicon

React在Github上已有靠近70000的 star 数了，是如今最热点的前端框架。而我进修React也有一段时候了，如今就最先用 React+Redux 举行实战！

上回说到运用Redux-saga 治理 Redux 运用异步操纵,运用照样只要一个首页.如今最先构建一个新的投稿页面并运用 React-Router 举行路由治理.

React 实践项目（一）
React 实践项目（二）
React 实践项目（三）
React 实践项目（四）

– 起首我们来构建投稿页面

建立 src/containers/SubmitEntry.js

/**
 * Created by Yuicon on 2017/7/13.
 * https://github.com/Yuicon
 */
import React, {Component} from 'react';
import {Button, Form, Input, Switch, Notification} from "element-react";
import {connect} from "react-redux";
import {createEntryAction} from '../../redux/action/entries';
import './SubmitEntry.css';

@connect(
  (state) => {
    return ({
      entries: state.entries,
    });
  },
  {createEntryAction: createEntryAction}
)
export default class SubmitEntry extends Component {

  constructor(props) {
    super(props);

    this.state = {
      form: {
        title: '',
        content: '',
        original: true,
        originalUrl: null,
        english: false,
        type: 'article',
      },
    loading: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.entries.get('saveSuccess')) {
      Notification.success({
        title: '胜利',
        message: '投稿胜利',
        duration: 1500
      });
      this.setState({form: {
        title: '',
        content: '',
        original: true,
        originalUrl: null,
        english: false,
        type: 'article',
      }});
    } else if (nextProps.entries.get('error')) {
      Notification.error({
        title: '毛病',
        message: nextProps.entries.get('error'),
        type: 'success',
        duration: 1500
      });
    }
    this.setState({loading: false});
  }

  handleSubmit = () => {
    this.props.createEntryAction(this.state.form);
    this.setState({loading: true});
  };

  handleChange = (key, value) => {
    this.setState({
      user: Object.assign(this.state.form, {[key]: value})
    });
  };

  render(){
    return(
      <div className="SubmitEntry-container">
        <div className="head">
          <h2>引荐文章到掘金</h2>
          <p>谢谢分享，文章的考核时候约1-2个工作日</p>
        </div>
        <div className="entry-form">
          <Form model={this.state.form} labelWidth="80" onSubmit={this.handleSubmit}>
            <Form.Item label="分享网址">
              <Input value={this.state.form.originalUrl} onChange={this.handleChange.bind(this, 'originalUrl')}/>
            </Form.Item>
            <Form.Item label="题目">
              <Input value={this.state.form.title} onChange={this.handleChange.bind(this, 'title')}/>
            </Form.Item>
            <Form.Item label="形貌">
              <Input value={this.state.form.content} onChange={this.handleChange.bind(this, 'content')}/>
            </Form.Item>
            <Form.Item >
              <Switch
                value={this.state.form.original}
                onChange={this.handleChange.bind(this, 'original')}
                onText="原创"
                offText="转载">
              </Switch>
            </Form.Item>
            <Form.Item >
              <Switch
                value={this.state.form.english}
                onChange={this.handleChange.bind(this, 'english')}
                onText="英文"
                offText="中文">
              </Switch>
            </Form.Item>
            <Form.Item >
              <Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}>
                宣布
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}

相干的Redux部份已讲过.就不反复引见了,感兴趣的能够检察示例代码

页面建立好了,最先运用 React-Router 治理路由
起首是增加依靠

编辑 package.json

     // react-router-dom 包括 react-router
    "react-router-dom": "^4.1.1",

编辑 App.js

/**
 * Created by Yuicon on 2017/6/25.
 */
import React, { Component } from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom'
import './App.css';
import Index from "../Index/Index";
import Header from "../Header/Header";
import SubmitEntry from "../SubmitEntry/SubmitEntry";

export default class App extends Component {

  render(){
    return(
    <Router>
      <div className="App">
        <Route component={Header}/>
        <Route exact path="/" component={Index}/>
        <Route exact path="/submit-entry" component={SubmitEntry}/>
      </div>
    </Router>
    )
  }

}

Router:

Router 一共有三种，我们采纳的是经常使用的 browserHistory

browserHistory h5的history
hashHistory 老版本浏览器的history
memoryHistory node环境下的history，存储在memory中

Route :

每一个 Route 标签都对应一个UI页面,它的职责就是当页面的接见地点与 Route 上的 path 婚配时，就衬着出对应的 UI 界面。
而 <Route component={Header}/> 是没有 path 的,这意味着在每一个页面都邑衬着出 Header 组件.

exact :

Route 上的 exact props 示意采纳严厉婚配,页面的接见地点与 Route 上的 path 必需一样
<Route exact path="/" component={Index}/> 只会婚配 ‘/’ , 不会婚配 ‘/submit-entry’
<Route path="/" component={Index}/> 会婚配一切 ‘/’ 开首的途径

history:

经常使用要领

push(path, [state]) 在汗青客栈信息里到场一个新条目。
经常使用于页面跳转，如： this.props.history.push('/'); 跳转至首页

replace(path, [state]) 在汗青客栈信息里替换掉当前的条目
与 push 的区别是没法经由过程汗青客栈返回跳转前的页面

goBack() 等同于浏览器的退却键

match:

match 对象包括了 Route 怎样与 URL 婚配的信息，具有以下属性：

params: object 途径参数，经由过程剖析 URL 中的动态部份取得键值对

isExact: bool 为 true 时，全部 URL 都须要婚配

path: string 用来婚配的途径形式，用于建立嵌套的 <Route>

url: string URL 婚配的部份，用于嵌套的 <Link>

经常使用于猎取途径中的参数
有如许一个路由 <Route path="/:id" component={Child}/>
在 Child 中能够如许猎取到 id 参数 this.props.match.params.id

结语
如今我们得到了一个能够见人的运用了，剩下的大部份是一些营业代码。为了磨练结果当然是挑选布置到服务器。下篇文章将会引见应用 nginx 的 docker 镜像布置 React 运用。

完全项目代码地点：https://github.com/DigAg/diga…

    原文作者：Yuicon
    原文地址: https://segmentfault.com/a/1190000010312356
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

– 起首我们来构建投稿页面

页面建立好了,最先运用 React-Router 治理路由

结语