片段应包含多个子片段。EsLint 错误。如果组件

Question

我目前有这段代码，但 EsLint 显示以下错误：“片段必须包含多个子片段 - 否则不需要片段。”。但如果不将代码包装在 React.Fragment 中，我就无法执行 IF。是否有另一种方法可以在不允许 lint 规则的情况下消除此错误？

return (
            <>
                {loading && (
                    <div className={classes.container}>
                        <img
                            alt="loading"
                            src={LoadingAnimation}
                            className={classes.img}
                        />
                    </div>
                )}
            </>
        );

Answer 1

这是一种修复方法

return loading ? (
                    <div className={classes.container}>
                        <img
                            alt="loading"
                            src={LoadingAnimation}
                            className={classes.img}
                        />
                    </div>
                )
                : null;

编辑

由于这个答案得到了一些赞成票，我将进一步解释：

简单来说，aFragment是一个存在于React组件树中，但不会在DOM中渲染的元素。当您需要在 JSX 表达式中返回多个节点时，片段非常有用。

这是非法代码：

const Component = () => (
  return (
    <div>
       Child 1
    </div>
    <div>
       Child 2
    </div>
  );
);

这会引发错误JSX expressions must have one parent element。您可以将它们包装在另一个中div，错误就会消失，但最终会得到另一个 DOM 元素。但是，当你使用 a 时Fragment，React 将其理解为“父元素”，但该元素不会出现在 DOM 树中：

const Component = () => (
  return (
    <React.Fragment>
      <div>
         Child 1
      </div>
      <div>
         Child 2
      </div>
    </React.Fragment>
  );
);

<>另外，您可以使用Fragment 的简写：

const Component = () => (
  return (
    <>
      <div>
         Child 1
      </div>
      <div>
         Child 2
      </div>
    </>
  );
);

该问题的错误实际上在于使用 Fragment 只返回一个孩子。它确实有效，但没有必要。