I am starting with react and I would like to make simple navigation bar for beginning. I am using component for item in the list of links. Which is used in the component with whole list and than it´s rendered by another component.
我從反應開始,我想做一個簡單的導航條開始。我在鏈接列表中使用組件。用於整個組件列表和比它´s呈現由另一個組件。
This is one item in the list.
這是列表中的一個項目。
import React from 'react';
import ReactDOM from 'react-dom';
export default class NavLi extends React.Component {
render() {
return (
<li className="nav-item active"><a className="nav-link" href={this.props.href}>{this.props.children}</a></li>
);
}
}
Called by this class:
調用這個類:
import React from 'react';
import ReactDOM from 'react-dom';
import NavLi from './NavLi';
export default class NavUl extends React.Component {
render() {
return (
<ul className="nav navbar-nav">
<NavLi href="home">Home</NavLi>
<NavLi href="about">About</NavLi>
<NavLi href="contact">Contact</NavLi>
</ul>
);
}
}
And again and again.
和一次又一次。
import Log from './Log';
import NavUl from './NavUl';
export default class Nav extends React.Component {
render() {
return (
<nav className="navbar navbar-fixed-top navbar-dark bg-inverse">
<div className="container">
<a className="navbar-brand" href="#">ProjectName</a>
<NavUl/>
<Log/>
</div>
</nav>
);
}
}
.
。
import React from 'react';
import ReactDOM from 'react-dom';
import Nav from './navbar/Nav';
class App extends React.Component {
render() {
return (
<div>
<Nav/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react'));
This whole thing is in .html like this: <div id="react"></div>
這整個是在.html中:
。I am using bootsrtap4 and the problem is, that in every item in the list of navigation bar I can´t see css class at <a></a>
when I run the app. Everything worsk fine, but in tags <a></a>
are no classess at all after running this app screenshot from browser.
我用bootsrtap4,問題是,在導航欄列表中的每一項我看´t css類在 <一> < / >當我運行這個程序。一切都worsk好,但在 <一> < / >標簽后沒有類運行這個應用程序從瀏覽器截圖。
Any advice why this is not working? Thank you.
有什么不奏效的建議嗎?謝謝你!
3
From the spec:
從規范:
Content model: Transparent, but there must be no interactive content or a element descendants.
內容模型:透明,但必須沒有交互內容或元素的后代。
Nested <a>
elements are forbidden in HTML. You are bouncing off error recovery in the browser.
0
I think you didn't define the style in CSS file. Can you find a style of 'nav-link' in CSS file? In my case, the class did not appear when I don't define the style in CSS file.
我想你沒有在CSS文件中定義樣式。你能在CSS文件中找到“導航鏈接”的樣式嗎?在我的例子中,當我不在CSS文件中定義樣式時,類沒有出現。
本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/01/05/720b98af2e84dde165ccd639c2d2121.html。