javascript - 片段应包含多个子片段。 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;

编辑

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

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

这是非法代码:

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

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

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

此外，您还可以使用简写 <>对于片段:

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

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