reactjs - Eslint 错误 : Missing parentheses around multilines JSX react/jsx-wrap-multilines

Question

我在我的项目中使用 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={....)

Answer 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"
/>