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

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

javascript reactjs web ecmascript-6

Javascript 将子节点（超链接）添加到ES6/JSX网页div（导航栏）,javascript,reactjs,web,ecmascript-6,Javascript,Reactjs,Web,Ecmascript 6,我正在尝试使用reactjs/jsx/es6I我不确定哪一个是正确的术语来创建一个网站，它只是一个导航栏，上面有3个链接。这是一个简单的html文件，可以做同样的事情 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React tutorial</title> <link rel="stylesheet" type=

我正在尝试使用reactjs/jsx/es6I我不确定哪一个是正确的术语来创建一个网站，它只是一个导航栏，上面有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>

1-NavBarItem和NavBar是功能组件，因此不能使用关键字“this”。因为它们不是类，所以您不必引用组件本身

2-在react中，您必须使用classname来设置css类名

看起来我在navBar或navBarItem前面还需要一个类似const或var的单词，您将其包含在代码中，但没有显示出来。这仅仅是javascript吗？因为代码的可读性和效率，值不更改的代码的定义为const-way。

<!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>

.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;
}

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>
        )
    }