react如何与后端发来的数据交互？

Question

后端使用的是elixir的phoenix框架。
之前是直接使用html+css+js的比较原生的方式实现前端页面的，
但是现在准备将前端改为用react生成，
所以问问大家react如何使用后端传来的数据？？？

原前端页面

<div class="panel-body">
        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
          <thead>
              <tr>
                  <th>交易所标识</th>
                  <th>中文名</th>
                  <th>时区</th>
                  <th>主页</th>
                  <th>操作</th>
              </tr>
          </thead>
            <tbody>
              <%= for exchange <- @exchanges do %>
                <tr>
                  <td><%= exchange.name %></td>
                  <td><%= exchange.cn_name %></td>
                  <td><%= exchange.timezone %></td>
                  <td><%= exchange.home_page %></td>

                  <td class="text-center">
                    <%= link "编辑", to: exchange_path(@conn, :edit, exchange), class: "btn btn-default btn-xs" %>
                    <%= link "删除", to: exchange_path(@conn, :delete, exchange), method: :delete, data: [confirm: "Are you sure?"], class: "btn btn-danger btn-xs" %>
                  </td>
                </tr>
              <% end %>
            </tbody>
        </table>
        <!-- /.table-responsive -->
      </div>

代码<%= xxx %>都是直接处理后端数据的， 用react该如何返回数据？ 给个大概思路， 或者说 其他框架中，react是如何处理后端传来的数据库查询数据的？

Answer 1

不知道你说的eact如何使用后端传来的数据是什么意思哈？

请求数据？还是Universal渲染？

react和一般原生前端没有什么却别，其实就是MVC中view，你完全可以使用jquery去发ajax请求。

当然，现在一般我们会使用react技术栈去开发react项目。
就是react react-redux react-router css-module redux-saga等等

可以参考下我前两天写的一个高仿大众点评的demo，后端用的是express，简单模拟的数据请求。

https://github.com/Nealyang/R...

Answer 2

方式一.尝试引入状态管理器，redux或者mobx，由于一般常用的数据请求为ajax等异步的操作，建议使用mobx，对异步操作更加友善。
方式二.通过事件机制，将react类内部的事件方法绑定在对应dom事件上，在事件方法中调用setState方法，改变react的state,达到重新渲染。

Answer 3

在需要表格的地方引入下面代码

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            exchanges: []
        }
    }
    componentDidMount() {
        fetch('').then(data => {
            this.setState({
                exchanges: data.exchanges
            });
        })
    }

    onEdit = () => {

    }

    onDelete = () => {

    }

    render() {
        return (
            <div class="panel-body">
            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
              <thead>
                  <tr>
                      <th>交易所标识</th>
                      <th>中文名</th>
                      <th>时区</th>
                      <th>主页</th>
                      <th>操作</th>
                  </tr>
              </thead>
                <tbody>
                    {
                        this.state.exchanges.map(item => {
                            return (
                                <tr>
                                    <td>{item.name}</td>
                                    <td>{item.cn_name}</td>
                                    <td>{item.timezone}</td>
                                    <td>{item.home_page}</td>
                                    <td class="text-center">
                                        <span onClick = {this.onEdit}>编辑</span>
                                        <span onClick = {this.onDelete}>删除</span>
                                    </td>
                                </tr>
                            );
                        });
                    }
                </tbody>
            </table>
          </div>
        );
    }
}