时间戳

首页 > 解决方案 > react.js 根块的不同内容

javascript - react.js 根块的不同内容

问题描述

我正在开发一个动态页面，主模板是在PHP上渲染的，有一个react的根块，其中有一定的逻辑；问题是如何在一个文件中有两个不同的反应应用程序，这取决于来自外部的一些参数，例如，一页将是“品牌”，而对于其他“评论”，您还需要从外部，例如 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"));

标签： javascriptreactjs

解决方案

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

如果是这样，有以下选项：

  1. 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/>标签可以是您想要嵌入的任何其他标签。您可以查看这篇文章以找到更多详细信息。

  2. 使用 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取自这里）

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

    如果您希望最终用户自己选择一个应用程序，这种情况是合适的。反应应用程序也可能会更改代码中的地址。

推荐阅读