React:期望一个赋值或函数调用,而是看到一个表达式

Question

我试图const def = (props) => {在下面的示例代码中修复此lint错误.

const propTypes = {
prop1: PropTypes.string,
prop2: PropTypes.string,
prop3: PropTypes.string,
prop4: PropTypes.string,
prop5: PropTypes.string,
}

const abc = (props) => {
some code here }

const def = (props) => {
<div>
<div className=" ..some classes..">{abc}</div>
<div className=" ..some classes..">{t('translation/something')}</div>

<div ...>
  <someComponent 
    do something
  />

if (some condition) {
do this
} else {
do that
}

</div>

};

知道为什么我得到这个lint错误？

Answer 1

您没有返回任何内容,至少从您的代码段和评论中返回.

const def = (props) => { <div></div> };

这不会返回任何内容,您使用花括号包装箭头函数的主体,但没有返回值.

const def = (props) => { return (<div></div>); }; 要么 const def = (props) => <div></div>;

另一方面,这两个解决方案返回一个有效的React组件.还要记住,在你的内部jsx(如@Adam所述)你不能if ... else ...只有三元运算符.

Answer 2

期望赋值或函数调用，却看到了一个表达式。

我在这段代码中遇到了类似的错误：

const mapStateToProps = (state) => {
    players: state
}

为了更正我需要做的就是在弯曲的括号周围添加括号

const mapStateToProps = (state) => ({
    players: state
});

Answer 3

return 语句应该放在一行中。或者另一种选择是删除绑定 HTML 语句的大括号。

例子：

return posts.map((post, index) =>
    <div key={index}>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
);

Answer 4

你必须返回一些东西

而不是这个（这不是正确的方法）

const def = (props) => { <div></div> };

尝试

const def = (props) => ( <div></div> );

或使用 return 语句

const def = (props) => { return  <div></div> };