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.

有什么不奏效的建議嗎?謝謝你！

2 个解决方案