return ES6 反应中函数中的变量或常量 class

Question

我有一个函数，我返回一个变量来创建列表项。该函数很高兴 returns 无序列表，但不是我要为其填充的项目。我会很感激我为什么出错的方向。

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() 调用相应的函数来 return 一个值要么只需为链接变量直接赋值即可。

NavMenu () {

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

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

Answer 2

links 是 returns 元素的函数。你应该这样称呼它 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>

return ES6 反应中函数中的变量或常量 class

return a variable or constant in a function in an ES6 react class

javascript

ecmascript-6

reactjs

es6-class