Question

我有一个非常简单的无状态组件，该组件根据要获取的prop的值进行渲染。

const CollapseButton = ({ showCollapseButton }) => (
    { showCollapseButton && (
      <div>
        <FormattedMessage id="headerText.showMore" />
        <Image
          src={arrowDownImageUrl}
        />
      </div>
      )
    }
);

CollapseButton.propTypes = {
  showCollapseButton: PropTypes.bool.isRequired,
};

export const CollapseButton;

但是，我收到&&运算符的生成错误。

模块构建失败（来自./node_modules/babel-loader/lib/index.js）： SyntaxError：意外令牌，应为（7:25）

那是为什么，我在这里做什么错了？

Answer 1

要解决此问题，您可以删除花括号，如下所示：

const CollapseButton = ({ showCollapseButton }) => (
    showCollapseButton && (
      <div>
        <FormattedMessage id="headerText.showMore" />
        <Image
          src={arrowDownImageUrl}
        />
      </div>
      )
);

CollapseButton.propTypes = {
  showCollapseButton: PropTypes.bool.isRequired,
};

export const CollapseButton;

或添加return语句，如下所示：

const CollapseButton = ({ showCollapseButton }) => {
    return showCollapseButton && (
      <div>
        <FormattedMessage id="headerText.showMore" />
        <Image
          src={arrowDownImageUrl}
        />
      </div>
      )
};

CollapseButton.propTypes = {
  showCollapseButton: PropTypes.bool.isRequired,
};

export const CollapseButton;

请注意，在第二个示例中，顶级括号已更改为花括号。

Answer 2

删除花括号

 { showCollapseButton && (
      <div>
        <FormattedMessage id="headerText.showMore" />
        <Image
          src={arrowDownImageUrl}
        />
      </div>
      )
    }

设为

showCollapseButton && (
      <div>
        <FormattedMessage id="headerText.showMore" />
        <Image
          src={arrowDownImageUrl}
        />
      </div>
      )

应该可以。无需环绕{}

Answer 3

您的错误与JSX或React无关，但与箭头函数语法无关。您正在使用箭头函数的高级语法，该函数用括号括住函数体以返回对象文字表达式：

const example = () => ({foo: 'bar'}) 
console.log(example().foo)

因此，当编译器找到&&时，它说应该在对象内部有,。

const example = () => ({foo && 'bar'})

要解决此问题，您有两个选择，删除括号并在函数内放一个return：

const example = () => {return true && 'bar'}
console.log(example())

或者只删除花括号，因为箭头函数的主体内只有1条语句。

const example = () => true && 'bar'
console.log(example())

由于您仅对这条语句有几行，因此，为避免在语句内出现自动;陷阱，是一种很好的做法，请在括号内进行改进：

const example = () => (true && 
                       'bar')
console.log(example())

即使您使用带有大括号的返回形式，也应使用括号来扩展返回值，即多行中的一条语句，以获取最佳做法：

const example = () => {
    return (true && 
            'bar')
}
console.log(example())

React-SyntaxError：无状态令牌，对于无状态组件中的AND运算符应为

3 个答案: