Eslint 错误：多行 JSX react/jsx-wrap-multilines 周围缺少括号

Posted 2023-02-22

【中文标题】Eslint 错误：多行 JSX react/jsx-wrap-multilines 周围缺少括号

【英文标题】：Eslint error: Missing parentheses around multilines JSX react/jsx-wrap-multilines

【发布时间】：2019-11-07 13:25:15

【问题描述】：

我在我的项目中使用 Material UI 复选框。我使用它的方式与在 Material UI 示例中使用的方式相同：https://material-ui.com/components/checkboxes/ 但是 eslint 向我显示了这个错误：

错误多行 JSX react/jsx-wrap-multilines 周围缺少括号

<FormControlLabel
  control=
    <Checkbox
      checked=data.default
      value="default"
      onChange=(e) => 
        return setData( ...data, default: e.target.checked );
      
    />
  
  label="Make default"
/>

错误在第 2 行 (control=....)

【参考方案1】：

请参阅jsx-wrap-multilines rule page 上的示例：

您可以禁用该规则，或将任何多行 React 元素包装到括号中：

<FormControlLabel
  control=( // starting paren here
    <Checkbox
      checked=data.default
      value="default"
      onChange=(e) => 
        return setData( ...data, default: e.target.checked );
      
    />
  ) // ending paren here
  label="Make default"
/>