我正在研究PHP HRM系统,并试图集成React中开发的资源调度程序。 我已经使用Webpack将所有JS和CSS捆绑在单独的文件中。
简化的文件夹结构:
admin
-index.php
scheduler (react's part)
-bundled.js
-bundled.css
我需要实现的是包括那些捆绑文件以显示在index.php中(显然在React的目录之外)。我当时正在考虑将它们包括如下:
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React Big Scheduler Examples</title>
</head>
<body>
<div>
<div id="root"></div>
</div>
<link rel="stylesheet" type="text/css" href="../scheduler/bundled.css">
<script type="text/babel" src="../scheduler/bundled.js"></script>
</body>
</html>
bundled.js:
import React,{Component} from 'react'
import {render} from 'react-dom'
import {HashRouter as Router,Route} from 'react-router-dom'
import Basic from './Basic'
import Locale from './Locale'
etc imports....
render((
<Router>
<Route exact path="/" component={Basic}/>
<Route path="/readonly" component={Readonly}/>
<Route path="/locale" component={Locale}/>
<Route path="/views" component={Views}/>
etc routes....
</Router>
),document.getElementById('root'))
bundled.css
body {
backgroud-color: grey;
}
etc styles....
正如我在Developer工具中测试过的那样,路径正确无误,控制台中也没有显示错误。
星期四,在index.php中没有任何内容呈现给<div id="root"></div>
。
任何帮助将不胜感激!