は、私はその（省略）コードコンポーネントを持つ論理演算子

Question

&&と「ノード」に「removeChildの」を実行できませんでした。次のようになります。あなたが見ることができるように

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文を実行します。

私のタブの1つに誤りがあると（例えば、検証に失敗した入力のために）、その条件ブロックの内容（エラーアイコン）が正しくレンダリングされます。私は、入力中に何かを入力しようとすると、ページが次のエラーで吹く：

は、私がブロックし、常にアイコンをレンダリングする場合、私は、インラインを削除した場合、それはエラーがないことがわかりました。なぜこうなった？

更新日ここにはCodeSandboxがあります。

Answer 1

私の問題の原因は、FontAwesomeでした。私の条件付きアイコンの元のマークアップは<i>タグを使用しますが、FontAwesomeはこれを最終的にsvgに変換します。 ReactがDOMから<i>要素を削除すると、もはや存在せず、爆弾が爆発する。

私は<div>で、条件付きコンテンツをラップすることで、これを解決：

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