使用后端 api 在 reactjs 中创建 CRUD UI

Question

我在 laravel 中创建了一个 CRUD 应用程序，但现在我想用 react.js 改进 UI。我还是很新的反应，所以不知道如何去做。

到目前为止，我已经创建了一个表格组件来显示所有有反应的用户。我应该如何使用 react-router 或任何可用的工具来实现users/{id}、users/create、users/{id}/edit 等，以便当我单击“显示用户”按钮时，将出现另一个带有用户详细信息的组件来替换用户表中的相同的观点。

还有一个问题，如何将对象从后端传递到反应视图？

谢谢。

这就是我现在拥有的：

import React from 'react';
import Router from 'react-router'; 
import { Route, Link, RouteHandler } from 'react-router';

var FilterableTable = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      filterText: ''
    };
  },
  handleUserInput: function(filterText) {
    this.setState({
      filterText: filterText
    });
  },
  loadDataFromServer: function() {
    $.ajax({
      url: this.props.url,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadDataFromServer();
  },
  render: function() {
    return (
      <div>
        <NavBar
          filterText={this.state.filterText}
          onUserInput={this.handleUserInput}
        />
        <ObjectTable
          data={this.state.data}
          filterText={this.state.filterText}
        />
        <RouteHandler/>
      </div>
    );
  }
});


var NavBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.getDOMNode().value
    );
  },
  render: function() {
    return (

      <nav className="navbar">
        <ul className="nav navbar-nav">
           <li>
              <Link to="/admin/users">All users</Link>
           </li>
           <li>
              <Link to="/admin/users/create">Create a user</Link>
           </li>
        </ul>
        <form className="form-group pull-right">
          <input
            className="form-control"
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            ref="filterTextInput"
            onChange={this.handleChange}
          />
        </form>
      </nav>
    );
  }
});

var ObjectTable = React.createClass({
  render: function() {
    var rows = [];
    this.props.data.forEach(function(object) {
      if (object.username.indexOf(this.props.filterText) === -1 &&     object.email.indexOf(this.props.filterText) === -1)
        return;
      rows.push(<ObjectRow object={object} key={object.uid}/>);

    }.bind(this));
    return (
      <table className="table table-striped table-bordered">
        <thead>
            <tr>
              <td>ID</td>
              <td>Username</td>
              <td>Email</td>
              <td>Actions</td>
            </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var ObjectRow = React.createClass({
  render: function() {
    var objId = this.props.object.uid;

    return (
      <tr>
        <td>{this.props.object.uid}</td>
        <td>{this.props.object.username}</td>
        <td>{this.props.object.email}</td>
        <td>
          <Link to="/admin/users/:objId" params={{objId: objId}} className="btn btn-small btn-success">Show</Link>
          <Link to="/admin/users/:objId/edit" params={{objId: objId}} className="btn btn-small btn-info">Edit</Link>
        </td>
      </tr>
    );
  }
});

var ShowObject = React.createClass({
  render: function() {

     return (

      <h1>showing a user</h1>
    );
  }
});


var routes = (
  <Route path="admin/users" handler={FilterableTable}>
    <Route path="/admin/users/:objId/edit" />
    <Route path="/admin/users/create" handler={CreateObject} />
    <Route path="/admin/users/:objId" handler={ShowObject} />
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {  
  React.render(<Handler url="/admin/get_users" />,  document.getElementById('app'));
});

Answer 1

所以回答你的两个问题：

1. React-router 使用起来非常简单，文档是 伟大的。你只需要创建你想要的不同路线 客户端。在您的情况下，您将拥有三条路线。最好的方法是检查关于react-router的文档非常好

2. 要从后端获取数据，无论是否反应，你 必须使用ajax。您可以使用 jQuery 并从 componentDidMount 方法并更新您的反应状态 相应的组件。这实际上就是你正在做的事情 效果很好。您可能需要考虑 Flux 模式以避免 在您的反应组件中进行数据管理并让它们成为 系统中的简单视图。