React-SyntaxError:意外的标记,应用于无状态组件中的AND运算符

拆下周围的花括号

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

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

应该有用。不需要绕来绕去{}

要解决此问题,可以移除花括号,如下所示:

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;

您的错误与JSX或React无关,而是与arrow函数语法有关。您正在使用插入函数体的箭头函数的高级语法来返回对象文字表达式:

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

所以,当编译器发现 && ,据说 , 在de对象内部。

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

要解决这个问题,您有两个选项,删除括号并在函数中放置一个返回:

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

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

因为只有这一条语句有几行,所以最好将它放在括号中以避免auto ; 陈述中的陷阱:

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

即使使用带大括号的返回表单,也应该使用括号来表示返回值,即几行中的一条语句,以获得最佳实践:

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