使用React在Tabs中显示现有的JS / html页面

Question

I am new to React I am trying to create a simple code. 我是React的新手我正在尝试创建一个简单的代码。 At the moment I have several dashboards that I wrote using HTML/JavaScript/JQuery integrating with a php server code in MVC way. 目前我有几个仪表板，我使用HTML / JavaScript / JQuery以MVC方式集成php服务器代码。

My goal is to create a dashboard center, basically this page will show a few Tabs, each tab will load a different dashboard. 我的目标是创建一个仪表板中心，基本上这个页面会显示几个标签，每个标签会加载一个不同的仪表板。

I run into multiple problems when importing my files (I added them to the src directory) when importing JS files to the react app, I get failed to compile on about everything inside those files. 我在导入我的文件时遇到了多个问题（我将它们添加到src目录中），当将JS文件导入到反应应用程序时，我无法编译这些文件中的所有内容。 the react is also shouting about me using ag-grid compoinents inside the JS files. 反应也在使用JS文件中的ag-grid组件来喊我。

is there a way to do what I need to achieve ? 有没有办法做我需要做的事情？ is there a way to load a html files from within the React app. 有没有办法从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;

this is an example of one of my html files 这是我的一个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

You need to import react and react-dom depandencies and your building app into your html file. 您需要将react和react-dom depandencies以及您的构建app导入到您的html文件中。 Then you need the following code to render your App component: 然后，您需要以下代码来呈现您的App组件：

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

Answer 2

Hi if anyone ever have a similar question. 嗨，如果有人有类似的问题。 in the end I solved the problem with using react-iframe 最后我使用react-iframe解决了这个问题

then my react app just loaded my previous JS/JQUERY pages from a link to my server. 然后我的反应应用程序只是从我的服务器的链接加载我以前的JS / JQUERY页面。

when I develop new apps from now I will do it in react no problem. 当我从现在开发新的应用程序时，我会做出反应没有问题。 this was an easy solution for integrating my previous dashboards inside a tab component in a react app. 这是一个简单的解决方案，用于将我以前的仪表板集成到react应用程序中的选项卡组件中。

使用React在Tabs中显示现有的JS / html页面

问题描述

2 个解决方案

解决方案1
0 2019-05-10 11:31:21

解决方案2
0 2019-05-17 16:26:49

使用React在Tabs中显示现有的JS / html页面

问题描述

2 个解决方案

解决方案1 0 2019-05-10 11:31:21

解决方案2 0 2019-05-17 16:26:49

解决方案1
0 2019-05-10 11:31:21

解决方案2
0 2019-05-17 16:26:49