无法使用&&逻辑运算符在'Node'上执行'removeChild'

Question

我有一个组件，其（缩写）代码如下所示：

export const TestComponent: React.SFC = props => {
  const { tabs, content } = props;
  return (
    <Tabs>
      <TabList>
        {tabs.map((x, i) => {
          const { hasError, children } = x.props;
          return (
            <Tab key={i} className={hasError ? "has-error" : ""}>
              <a>{children}
                {hasError && <i className="fas fa-exclamation-triangle fa-lg"></i>}
              </a>
            </Tab>
          );
        })}
      </TabList>
      <div className="tab-content">
        {content .map((x, i) => {
          return <TabPanel key={i}>{x.props.children}</TabPanel>;
        })}
      </div>
    </Tabs>
  );
};

如您所见，我正在使用逻辑&&运算符来执行内联IF语句。

当我的一个标签出错时（例如，由于输入验证失败），它会正确呈现该条件块的内容（错误图标）。当我尝试在输入中键入内容时，页面会出现以下错误：

我发现如果我删除内联IF块并始终呈现图标，则不会出错。为什么会这样？

更新这是一个CodeSandbox。

Answer 1

事实证明我的问题的原因是FontAwesome。我的条件图标的原始标记使用<i>标记，但FontAwesome最终将其转换为svg。当React去除DOM中的<i>元素时，它不再存在并且它会爆炸。

我通过将条件内容包装在<div>中解决了这个问题：

{hasError && (
    <div>
        <i className="fas fa-exclamation-triangle fa-lg" />
    </div>
)}