在嵌套的中,React沒有顯示css樣式。

[英]React does not show css style in nested


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 个解决方案

#1


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.

嵌套的元素在HTML中是禁止的。您在瀏覽器中反彈錯誤恢復。

#2


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



 
粤ICP备14056181号  © 2014-2020 ITdaan.com