Question

我正在开发一个动态页面，主模板在PHP上呈现，有一个反应的根块，其中有一定的逻辑；问题是如何在一个文件中拥有两个不同的react-applications，取决于来自外部的某些参数，例如，一页将是“品牌”，而另一页将是“评论”，您还需要从外部提供参数，例如id

在根文件index.js中想到一个想法，并解析url并解决这种情况通过if-else语句。但这告诉我这是一个不好的编程口气

我正在做后端，所以我不知道正确的解决方案。有什么想法吗？

import React from "react";
import ReactDOM from "react-dom";
import Brands from "./components/Brands.js";

ReactDOM.render(<Brands />, document.getElementById("root"));

Answer 1

如果我理解正确，则希望拥有基于PHP的主页，该页面由服务器端的某些框架（如lavarel）生成。 PHP页面将包含<div id="react-root"/>或类似的出现React应用程序的块。您需要根据PHP后端已知的某些参数值告诉React app呈现什么内容。

如果是，则有以下选项：

HTML5“数据”属性

使用任意data-属性将一些标签嵌入PHP页面。 HTML5支持带有前缀data-属性的任意参数。

例如
```
 <script id="appselector" data-app="runApp1" src="http://yoursite.io/app.js" >
```
在根文件pf React app中执行
```
 var script_tag = document.getElementById('appselector')
 var choosenApp = script_tag.getAttribute("data-app");
 // choosenApp will contain required id
```
当然，您可以嵌入任何其他标签来代替<script/>标签。您可以查看this post来查找其他详细信息。

使用QueryString，但再次使用<script/>块。

例如

<script id="appselector" src="http://yoursite.io/app.js?app=runApp1">

在您的React应用程序的根目录中

var script_tag = document.getElementById('appselector');
var query = script_tag.src.replace(/^[^\?]+\??/,''); 
// Parse the querystring into arguments and parameters
var vars = query.split("&");
var args = {};
for (var i=0; i<vars.length; i++) {
    var pair = vars[i].split("=");
    // decodeURI doesn't expand "+" to a space.
    args[pair[0]] = decodeURI(pair[1]).replace(/\+/g, ' ');   
}
var choosenApp = args['app'];

（选项1和2来自here）

如@Prakash Sharma所建议，您可以使用React-router。与选项1和2的主要区别在于，react-router允许最终用户选择要运行的应用程序。它主要用于使React应用成为多页。例如，第一页将在地址http://reactapp.com/app1上，另一页将在地址http://reactapp.com/app2上，依此类推。除更改地址外，所有地址都应指向后端的单个PHP页面。 React应用程序内部的React-router将拦截URL并显示正确的页面或应用程序。没有真正的PHP页面更改。

如果您希望最终用户自己选择一个应用程序，则此情况适用。另外React应用可能会更改代码中的地址。

react.js根块的不同内容

1 个答案: