Question

我正在尝试使用reactjs / jsx / es6（我不确定哪一个是正确的术语）来创建一个网站，该网站只是一个带有3个链接的导航栏。这是一个纯HTML文件，可以执行相同的操作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <link rel="stylesheet" type="text/css" href="navBar.css">
  </head>
  <body>
    <div id="navBar">
      <a link='#About' class="navBarItem">About</a>
      <a link='#Publications' class="navBarItem">Publications</a>
      <a link='#Contact' class="navBarItem">Contact</a>
    </div>
  </body>
</html>

这是我的html文件，其中包含嵌入式的reactjs和ES6脚本。导航栏已打印到屏幕上，但是我看不到任何链接。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="navBar.css">
  </head>
  <body>
    <div id="navBar"></div>
    <script type="text/babel">

        NavBar = () => {
            return (
                <div id="navBar">
                    <NavBarItem link='#About' text='About'/>
                    <NavBarItem link='#Publications' text='Publications'/>
                    <NavBarItem link='#Contact' text='Contact'/>
                </div>
            )
        }

        NavBarItem = () => {
            return (
                <a href={this.props.link} class="navBarItem">{this.props.text}</a>
            )
        }

        ReactDOM.render(
            <NavBar />,
            document.getElementById('navBar')
        )
    </script>
  </body>
</html>

谢谢

navBar.css

.navBarItem {
    display: inline-block; 
    width: 31%;
    background: #016241;
    font-size: 1.5em;
    transition: background 1s;
    height: 49px;
    line-height: 49px;
    white-space: nowrap; 
    text-decoration: none;
    color: #FFFFFF;
}

#navBar {
    background: #016241;
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    height: 49px;
    column-count: 3;
    justify-content: space-around;
}

Answer 1

const NavBar = (props) => {
        return (
            <React.Fragment>
                <NavBarItem link='#About' text='About'/>
                <NavBarItem link='#Publications' text='Publications'/>
                <NavBarItem link='#Contact' text='Contact'/>
            </React.Fragment>
        )
    }

const NavBarItem = (props) => {
        return (
            <a href={props.link} className="navBarItem">{props.text}</a>
        )
    }

1-“ NavBarItem”和“ NavBar”是功能组件，因此不能使用关键字“ this”。由于它们不是课程，因此您不必引用组件本身。

2-在反应中，您必须使用“类名”来设置CSS类名

将子节点（超链接）添加到ES6 / JSX网页div（导航栏）

1 个答案: