Question

我目前的const设置如下：

＆＃13;

import React from 'react';
import { ButtonToolbar, Alert } from 'react-bootstrap';
import { CommentsModal } from '../comments-modal';


export const CommentsListBeijing = ({ comments }) => (
  comments.length > 0 ? <ButtonToolbar className="comment-list">
    {comments.map((com) => (
      <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/>
    ))}
  </ButtonToolbar> :
  <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
);

CommentsListBeijing.propTypes = {
  comments: React.PropTypes.array,
};

＆＃13;

如果我想添加其他if语句，我的代码会抛出错误。我不明白为什么。

这是我的新代码：

＆＃13;

import React from 'react';
import { ButtonToolbar, Alert } from 'react-bootstrap';
import { CommentsModal } from '../comments-modal';

export const CommentsListBeijing = ({ comments }) => (
  if (comments.length > 0 ) {
    <ButtonToolbar className="comment-list">
    {comments.map((com) => (
      return com.adminSpark ? 
        /* something admin-related */ : 
        <CommentsModal 
          key={ com._id } 
          comment={ com } 
          city={com.city} 
          person={com.person} 
          location={com.location} 
          title={com.title} 
          content={com.content} 
          fileLink={com.fileLink} 
          timestamp={com.timestamp} 
          createdBy={com.createdBy} />
    ))}
    </ButtonToolbar> :
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert>
 );
CommentsListBeijing.propTypes = {
  comments: React.PropTypes.array,
};

＆＃13;

当我尝试运行我的代码时，我收到此错误：＆＃34; imports / ui / components / beijing / comments-list-beijing.js：6：2：意外的令牌（6：2）＆＃34 ;

第6行引用＆＃34; if（comments.length＆gt; 0）{＆＃34;

我做错了什么？

Answer 1

在第一个示例中，您没有使用任何if语句。您正在使用ternary operator。

问题在于，在第一个示例中，您只有一个表达式，因此箭头函数将隐式返回它的值。

使用if时，您现在拥有语句。

示例：

＆＃13;

// Compiles just fine
var f = () => (
  (true) ? 1 : 0
);
// Could also write it as
// var f = () => true ? 1 : 0;
console.log(f());

＆＃13;

// Will not compile
var f = () => (
  if (true) {
    return 1;
  } else {
    return 0;
  }
);
console.log(f());

＆＃13;

您需要做的就是将箭头函数体包裹在花括号中。

＆＃13;

// Now it works
var f = () => { // <--
  if (true) {
    return 1;
  } else {
    return 0;
  }
}; // <--
console.log(f());

＆＃13;

为什么在我的const中添加两个if语句会抛出错误

1 个答案: