在ES6反應類中的函數中返回一個變量或常量

Question

我有一個函數，我正在返回一個變量來創建一個列表項。該函數愉快地返回無序列表，但不是我想要填充它的項目。我會感謝一些方向，爲什麼我出了問題。

Header.js

export class Header extends Component { 

    constructor() { 
     super(); 
    } 

    NavMenu() { 

     let links =() => (

      <li>hey</li> 
    ); 

    return (
     <ul className="nav navbar-navs"> 
      {links} 
     </ul> 
     ); 
    } 

    render() { 
     return (
       <div className="container-fluid"> 
          {this.NavMenu()} 
       </div> 
     ) 
    } 

    } 

    export default Header; 

謝謝:)

Answer 1

links是返回元素的函數。你應該稱呼它links()

class Header extends React.Component { 
 

 
    constructor() { 
 
     super(); 
 
    } 
 

 
    NavMenu() { 
 

 
     let links =() => (
 

 
      <li>hey</li> 
 
    ); 
 

 
    return (
 
     <ul className="nav navbar-navs"> 
 
      {links()} 
 
     </ul> 
 
     ); 
 
    } 
 

 
    render() { 
 
     return (
 
       <div className="container-fluid"> 
 
          {this.NavMenu()} 
 
       </div> 
 
     ) 
 
    } 
 
     
 
} 
 
ReactDOM.render(<Header/>, document.getElementById('app'));

<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="app"></div>

Answer 2

您正在使用{}鏈接變量，指向一個功能。

現在，無論你調用使用鏈接相應的功能（）返回一個值 或 只是分配一個直接值變量的聯繫。

NavMenu() { 

let links = (<li>hey</li>); 

return (
    <ul className="nav navbar-navs"> 
     {links} 
    </ul> 
    ); 
}