reactjs - 不加载引导导航栏 - 反应
问题描述
更新了,现在我看到导航栏有格式问题,不应该从引导程序中获取 CSS 属性吗?
我提交了这个项目以使其更容易:https ://github.com/damianaguilarcogan/pfi_front_v4
我刚刚创建了一个项目,但它没有加载导航栏,当然这是一个愚蠢的错误,但我无法找到它。
我创建了项目,在 index.html 中导入了引导程序,并通过了 css 链接。我在 ir navbar.js 中创建了文件夹组件。之后我从引导导航栏中选择了一个通用模板,最后从我的 app.js 中调用它。我看不出有什么问题,它应该已经与这些步骤一起工作了。
应用程序.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import navbar from './components/navbar';
function App() {
return (
<div className="App">
<navbar />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
导航栏.js
import React from 'react';
class navbar extends React.Component {
render() {
return (
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search"></input>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
}
export default navbar;
[1]: https://i.stack.imgur.com/zk8Lf.png
解决方案
React 期望组件以大写字母命名。尝试重命名navbar
为Navbar
.
class Navbar extends React.Component
<Navbar/>
推荐阅读
- sql-server-2012 - sql server 如何比较字符串
- kotlin - 如何向 Kotlin Dokka 文档添加页脚?
- javascript - 在按钮内渲染 SVG 图标?
- oracle - 如何正确地将表中的值与触发器进行比较?(PL-SQL)
- python - 递归打印函数删除参数元素
- c# - 如何将数据库连接到c#软件
- python - 为什么我的 EC2 可以通过 Gmail 发送电子邮件,但不能从自定义域发送电子邮件?
- amazon-web-services - boto3 无法从在 AWS 批处理中运行的 Docker 容器连接到 S3
- javascript - 删除突变返回 null
- regex - 匹配任何字符,但不匹配空格,而不仅仅是空格