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

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 语句。

当我的一个选项卡出现错误时(例如，由于输入验证失败)，它会正确呈现该条件 block 的内容(错误图标)。当我尝试在输入中键入内容时，页面会崩溃并显示以下错误:

我发现，如果删除内联 IF block 并始终渲染图标，则不会出错。为什么会发生这种情况？

更新这是一个CodeSandbox .

Answer 1

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

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

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