Question

我是React的新手，想要将我在HTML中创建的导航栏注入我的原始文档中。但是，React组件没有链接到HTML中的div，我真的不太确定，说实话有什么不对！

＆＃13;

 var NavBar = React.Component({
  render () {
    return (
    <div className="nav">
  	    <div className="bottom-nav">
  	        <div className="container-fluid">
  		        <a href="home.html" className="logo-link"><img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img></a>
  		        <input className="menu-btn" type="checkbox" id="menu-btn" />
  		        <label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
  		        <ul className="menu">
  			        <li className="item"><a href="collection.html">Collection</a></li>
  			        <li className="item"><a href="inspiration.html">Inspiration</a></li>
  			        <li className="item"><a href="http://nativecreative.bigcartel.com/" target="_blank">Shop</a></li>
  			        <li className="item"><a href="contact">Contact</a></li>
  		        </ul>
  	        </div>
        </div>
  	</div>
    );
  }
});

ReactDOM.render(
  <NavBar />,
  document.getElementById('navbar')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<head>

  <meta charset="utf-8">

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</head>

<body>

  <!-- - - - - - - - NAVIGATION START - - - - - - - -->

<div id="navbar"></div>
<script src="javascript/navbar.js"></script>

  <!-- - - - - - - - NAVIGATION END - - - - - - - -->

</body>

＆＃13;

Answer 1

使用class NavBar代替var NavBar =

以下是示例：

＆＃13;

class NavBar extends React.Component {


  render() {
    return (  	    
        <div className="nav">
           <div className="bottom-nav">
              <div className="container-fluid">
                 <a href="home.html" className="logo-link"><img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img></a>
                 <input className="menu-btn" type="checkbox" id="menu-btn" />
                 <label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
                 <ul className="menu">
                    <li className="item"><a href="collection.html">Collection</a></li>
                    <li className="item"><a href="inspiration.html">Inspiration</a></li>
                    <li className="item"><a href="http://nativecreative.bigcartel.com/" target="_blank">Shop</a></li>
                    <li className="item"><a href="contact">Contact</a></li>
                 </ul>
              </div>
           </div>
        </div>
    );
  }
}


ReactDOM.render( <
  NavBar / > ,
  document.getElementById('navbar')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='navbar'></div>

＆＃13;

Answer 2

更正语法＃1

 var NavBar = React.createClass({ // ...})

更正语法＃2

 class Navbar extends React.Component { // ...}

确保使用转换器（例如Babel）或无法正确解释JSX。

React组件未链接到HTML div

2 个答案: