我是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"/>
jeck猫
相关分类