带有条件的 React 中的 no-unused-expressions

Question

我有一个表单，需要先验证一个 const，如果为真，则打开模态，如果为假，则提交表单。

我这样做了，这行得通，但我得到了错误：

预期分配或 function 调用，而是看到一个表达式 @babel/no-unused-expressions

modalOpen = () => this.setState({ showModal: true });

const validateType = !someAttribute && hasChange;

const submit = () => {
    validateType ? this.modalOpen() : handleSubmit();
};

// Do I need to have this submit here too?
<Form className={cn} onSubmit={isReadOnly ? () => {} : handleSubmit} readOnly={isReadOnly}>

    <Button
        type="button"
        onClick={submit}
    />
</Form>

错误发生在此行：

validateType ? this.modalOpen() : handleSubmit();

我查看了文档，我真的不明白为什么会发生这个错误。

如果有人能帮助我理解，我将不胜感激。

Answer 1

选项 1 - 用if/else替换三元：

const submit = () => {
  if(validateType) this.modalOpen(); 
  else handleSubmit();
};

选项 2 - 在.eslint文件中找到规则，然后更改为规则以允许三元表达式：

no-unused-expressions: ["error", { "allowTernary": true }]

选项 3 - 忽略此行的 eslint：

const submit = () => {
  // eslint-disable-next-line no-unused-expressions
  validateType ? this.modalOpen() : handleSubmit();
};