Я пытаюсь использовать responsejs / 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-файл, который включает встроенный реактив и сценарий 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;
}