Question

render() {
        const { show } = this.props;

        return (
            { show && 
                <div className="main">what's wrong?</main>
            }

        )   
    }

我使用上面的jsx得到了snytax错误，没有任何线索为什么这不起作用。

Answer 1

第一个错误是因为括号show && <div>...。

Unexpected token, expected ,

大括号代表多种内容，这取决于它们在其中使用的上下文。放在return关键字后面，无论括号如何，它们都会被解释为Object literal/initializer。解析器期望show是一个键，后跟一个右括号，逗号或:和一个值，而是找到&&。

return ({
    key1,
    key2: value2
});

大括号不会开始代表JSX的内联代码表达式，直到它们位于元素内部。例如：

return (
    <div>{
        show && <div className="main">what's wrong?</main>
    }</div>
);

如果没有包装元素将它们区分为代码表达式而不是对象，则应删除它们：

return (
    show && <div className="main">what's wrong?</main>
);

一旦你解决了这个问题，就会引发第二个错误：

Expected corresponding JSX closing tag for <div>

这是因为<div>目前与</main>不匹配。将后者更改为</div>将解决此问题。

return (
    show && <div className="main">what's wrong?</div>
);

你也可以使用好的＆＃39; if：

if (show) return <div className="main">what's wrong?</div>;

Answer 2

我认为你想要的是

render() {
  const { show } = this.props

  return (
   <div>
     {
        show && <div className="main">what's wrong? </div>
      }
   </div>
  )
}

jsx snytax错误使用＆amp;＆amp;操作者

2 个答案: