Question

我是React的新手，我试图创建一个简单的代码。目前，我有几个仪表板是使用HTML / JavaScript / JQuery和MVC方式与php服务器代码集成编写的。

我的目标是创建一个仪表板中心，基本上该页面将显示一些选项卡，每个选项卡将加载不同的仪表板。

在将JS文件导入到React应用程序时，导入文件时遇到了多个问题（我将它们添加到src目录中），但无法编译这些文件中的所有内容。使用JS文件中的ag-grid组件，反应也对我大喊。

有没有一种方法可以完成我需要完成的工作？有没有一种方法可以从React应用程序中加载html文件。

import React from 'react';
import './App.css';
import { render } from "react-dom";
import Tabs from './Tabs';
require('./tab-dashboard-css/tabStyles.css');


function App() {
  return (
      <div>
        <h1>Tabs Demo</h1>
        <Tabs>
          <div label="Generic Dashboard">
              // I want to load an html file into a Tab like this
          </div>
          <div label="Test 1">
            After 'while, <em>Crocodile</em>!
          </div>
          <div label="Test 2">
            Nothing to see here, this tab is <em>extinct</em>!
          </div>
        </Tabs>
      </div>
  );
}


export default App;

这是我的html文件之一的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generic Dashboard</title>
    <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>
    <!--Bootstrap-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="/UI_Assets/select2/select2.min.css" rel="stylesheet"/>
    <script src="/UI_Assets/select2/select2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <!--Page CSS-->
    <link href="/dashboards/css/style.css" rel="stylesheet"/>

    <!--Font - OpenSans -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="../js/AccountGenericsDashboard.js"></script>
    <title>Campaign/AdSet/Ad</title>
</head>
<body>
<!--FIRST BOX-->

<div class="container custom_container">
        <div id="Main" align="center">
            <h1><b>Generic Dashboard – Accounts</b></h1>
            <span class="card_label">Client:<br></span>
            <select class="SelectClientClass" id="SelectClient" onchange="handleClientSelection()">
                <option value="" selected disabled hidden>Select Client / App</option>
            </select>
        </div>
</div>

<!--SECOND BOX-->
<div class="container custom_container2" id="freeGenericGridBox" align="center">
    <div id="freeGenericGrid" style="height: 320px;width:300px;" class="ag-theme-balham"></div>
</div>

<!--THIRD BOX-->
<div class="container custom_container3" align="center">
    <div id="usedGenericGrid" style="height: 600px;width:1300px;" class="ag-theme-balham"></div>
</div>

<!--FORTH BOX-->
<div class="container custom_container3" align="center">
    <div id="excludedFieldsGrid" style="height: 600px;width:1300px;" class="ag-theme-balham"></div>
</div>

</body>
<script>
    $(document).ready(function(){

        $("#SelectClient").select2();

        $("#SelectClient").select2({ width: 400 });

        $("#SelectClient").change(function(){
        });
    });
</script>
</html>

Answer 1

您需要将react和react-dom部门和建筑物app导入到html文件中。然后，您需要以下代码来呈现您的App组件：

ReactDom.render(React.createElement('App'), HTMLElement);

Answer 2

嗨，如果有人有类似问题。最后我解决了使用react-iframe的问题

然后我的react应用刚刚从链接到我的服务器的页面中加载了我以前的JS / JQUERY页面。

从现在开始我开发新应用程序时，我会以毫无问题的方式进行。这是将我以前的仪表板集成到react应用程序的选项卡组件中的简单解决方案。

使用React在选项卡中显示现有的JS / html页面

2 个答案: