我是React的新手，我试图创建一个简单的代码。目前，我有几个仪表板是使用HTML / JavaScript / JQuery和MVC方式与php服务器代码集成编写的。我的目标是创建一个仪表板中心，基本上该页面将显示几个选项卡，每个选项卡将加载不同的仪表板。在将JS文件导入到React应用程序中时，在导入文件（将它们添加到src目录中）时遇到了多个问题，我无法对这些文件中的所有内容进行编译。使用JS文件中的ag-grid组件，react也对我大喊大叫。有什么方法可以做我需要实现的目标吗？有没有一种方法可以从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><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"/>
2 回答
jeck猫
TA贡献1909条经验 获得超7个赞
您好，如果有人有类似问题。最后我解决了使用react-iframe的问题
然后我的react应用程序刚刚从指向服务器的链接中加载了我以前的JS / JQUERY页面。
从现在开始我开发新应用程序时，我会以毫无问题的方式做到这一点。这是将我以前的仪表板集成到react应用程序的选项卡组件中的简单解决方案。
添加回答
举报
0/150
提交
取消