将 php 数据库值绑定到 react.js

Question

我会尽量让这个问题尽可能简短。

我正在尝试做一些 react.js 服务器端渲染，但我很难重构从在线研究中获得的信息并将其应用于我的项目。

我正在使用 mysql 数据库中的用户名对应用程序中的所有路由使用路由模型绑定。我在 react.js 中有一些路由

看下面的sn-p：

var FileUpload = React.createClass({

  handleFile: function(e) {
    var reader = new FileReader();
    var file = e.target.files[0];

    if (!file) return;

    reader.onload = function(img) {
      React.findDOMNode(this.refs.in).value = '';
      this.props.handleFileChange(img.target.result);
    }.bind(this);
    reader.readAsDataURL(file);
  },

  render: function() {
    return (
      <input ref="in" type="file" accept="image/*" action="images/{user}/dpUpload" onChange={this.handleFile} />
    );
  }
});

如果您查看render:function() 中的HTML input 标记，action 的路由为images/{user}/dpUpload。每个知道 {user} 的 laravel 的人都可以以 RESTful 方式绑定到 admin。我需要绑定数据库给我的任何值来做出反应。这就是我目前得到的

Answer 1

您希望 user 变量在 React 中可用，而无需对其进行 ajax 请求？

您可以将其嵌入到 DOM 中。也许在data-user 属性中。

// On your page
<div id="user" data-user="admin"></div>

// In React
render: function() {
    var user = document.getElementById("user").getAttribute("data-user");
    return (
      <input 
        ref="in" 
        type="file" 
        accept="image/*" 
        action="images/{user}/dpUpload" 
        onChange={this.handleFile} />
    );
}

您也可以将用户变量放在页面上的脚本标记中，然后在 React 中使用window.myUserVariable 访问它。