在 ES6 反应类的函数中返回变量或常量答案

【问题标题】：return a variable or constant in a function in an ES6 react class在 ES6 反应类的函数中返回变量或常量
【发布时间】：2017-04-09 15:32:29
【问题描述】：

我有一个函数，我返回一个变量来创建一个列表项。该函数愉快地返回无序列表，但不返回我想要填充它的项目。我会很感激我为什么出错的一些方向。

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;

谢谢 :)

【问题讨论】：

应该是{links()} - 你必须执行箭头函数才能返回列表项。
或者在这种情况下只保留let links = (<li>Hey</li>);。
@AndrewLi tnxs 答案触手可及，但在 PC 前花费太多时间会导致您忽略基本的事情。
@SachinGadagi 是的，这是我可以实现的另一个有用的选项，可能会根据用户案例应用。再次Tnxs :)

标签： javascript reactjs ecmascript-6 es6-class

【解决方案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>

【讨论】：

谢谢你的例子对我和其他做同样事情的人很有帮助。
很高兴能帮上忙。

【解决方案2】：

您正在使用指向函数的 {links} 变量。

现在，您可以使用 links() 调用相应的函数来返回一个值或者只需为链接变量分配一个直接值。

NavMenu () {

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

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

【讨论】：