reactjs - 迁移到反应的引导模板示例无法按预期工作（羽毛图标和图形未显示，排版有小问题）
问题描述
我想从引导程序迁移示例仪表板以做出反应：https ://getbootstrap.com/docs/4.6/examples/dashboard/
我使用了 create-react-native 并尝试了这篇博文中提到的步骤：https ://javascript.plainenglish.io/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
结果看起来有点像示例。但右上角的图表没有显示（虽然 javascript 正在加载，但通过简单的警报进行了测试）。左侧菜单中的羽毛图标也没有显示。排版不正确，无论是菜单还是最突出的标题“仪表板”。
任何帮助都将不胜感激。
App.js 代码：
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render(){
return (
<div className="App">
<nav className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a className="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
<button className="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<input className="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"/>
<ul className="navbar-nav px-3">
<li className="nav-item text-nowrap">
<a className="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div className="container-fluid">
<div className="row">
<nav id="sidebarMenu" className="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div className="sidebar-sticky pt-3">
<ul className="nav flex-column">
<li className="nav-item">
<a className="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 className="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a className="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul className="nav flex-column mb-2">
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="file-text"></span>
Social engagement
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
<span data-feather="file-text"></span>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 className="h2">Dashboard</h1>
<div className="btn-toolbar mb-2 mb-md-0">
<div className="btn-group mr-2">
<button type="button" className="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" className="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas className="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div className="table-responsive">
<table className="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
<tr>
<td>1,002</td>
<td>placeholder</td>
<td>irrelevant</td>
<td>visual</td>
<td>layout</td>
</tr>
<tr>
<td>1,003</td>
<td>data</td>
<td>rich</td>
<td>dashboard</td>
<td>tabular</td>
</tr>
<tr>
<td>1,003</td>
<td>information</td>
<td>placeholder</td>
<td>illustrative</td>
<td>data</td>
</tr>
<tr>
<td>1,004</td>
<td>text</td>
<td>random</td>
<td>layout</td>
<td>dashboard</td>
</tr>
<tr>
<td>1,005</td>
<td>dashboard</td>
<td>irrelevant</td>
<td>text</td>
<td>placeholder</td>
</tr>
<tr>
<td>1,006</td>
<td>dashboard</td>
<td>illustrative</td>
<td>rich</td>
<td>data</td>
</tr>
<tr>
<td>1,007</td>
<td>placeholder</td>
<td>tabular</td>
<td>information</td>
<td>irrelevant</td>
</tr>
<tr>
<td>1,008</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
<tr>
<td>1,009</td>
<td>placeholder</td>
<td>irrelevant</td>
<td>visual</td>
<td>layout</td>
</tr>
<tr>
<td>1,010</td>
<td>data</td>
<td>rich</td>
<td>dashboard</td>
<td>tabular</td>
</tr>
<tr>
<td>1,011</td>
<td>information</td>
<td>placeholder</td>
<td>illustrative</td>
<td>data</td>
</tr>
<tr>
<td>1,012</td>
<td>text</td>
<td>placeholder</td>
<td>layout</td>
<td>dashboard</td>
</tr>
<tr>
<td>1,013</td>
<td>dashboard</td>
<td>irrelevant</td>
<td>text</td>
<td>visual</td>
</tr>
<tr>
<td>1,014</td>
<td>dashboard</td>
<td>illustrative</td>
<td>rich</td>
<td>data</td>
</tr>
<tr>
<td>1,015</td>
<td>random</td>
<td>tabular</td>
<td>information</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</div>
);
}
}
export default App;
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Dashboard Template · Bootstrap v4.6</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/dashboard/">
<!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="dashboard.js"></script>
</body>
</html>
解决方案
推荐阅读
- sprite-kit - 如何在 Spritekit 运行时显示物理体
- python - 为什么这个程序不将 .mp3 文件附加到音乐 []
- spring-boot - 如果没有提交 Accepte-Language 标头，即使 fallback-to-system-locale 设置为 false，Spring Boot 会回退到系统区域设置
- javascript - 链接以显示具有表格行的功能
- angular - 使用 Angular Reactive Forms，是否可以为每个验证器设置单独的“updateOn”？
- linux - 使用 SIGSTOP 和 SIGCONT 在 Bash 中处理并发文件写入
- css - 背景图像在使用 flexbox 的移动屏幕中无法正确调整大小
- spring - Spring Boot PasswordEncoder.matches 始终为 false
- powershell - 如何在 Windows Server 2012 中使用 Powershell 5 检查 Windows 服务的启动类型是“自动”还是“自动延迟”
- swift - 如何在 swift 中将正文添加到 https 请求