web-dev-qa-db-ja.com

React=でFontAwesomeを使用して 'Node'で 'removeChild'を実行できませんでした

FontAwesomeスピナーアイコンを使用しようとすると、次のエラーが表示されます（className='fa-spin'）React：

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:5000/public/bundle.js:19553:22)
at unmountHostComponents (http://localhost:5000/public/bundle.js:13683:11)
at commitDeletion (http://localhost:5000/public/bundle.js:13727:5)
at commitAllHostEffects (http://localhost:5000/public/bundle.js:14419:13)
at HTMLUnknownElement.callCallback (http://localhost:5000/public/bundle.js:5035:14)
at Object.invokeGuardedCallbackDev (http://localhost:5000/public/bundle.js:5074:16)
at invokeGuardedCallback (http://localhost:5000/public/bundle.js:4931:27)
at commitRoot (http://localhost:5000/public/bundle.js:14508:9)
at performWorkOnRoot (http://localhost:5000/public/bundle.js:15510:42)
at performWork (http://localhost:5000/public/bundle.js:15460:7)

編集：この問題は数回発生しており、コード自体に特別なことは何もありません。スピナーを読み込みアイコンとして使用しており、スピナーがコンテンツに置き換えられるたびにエラーが発生します。例：

return (
  <div>
    {this.state.loading === true ? <i className="fa-spin fas fa-sync"></i> : (
      this.state.recipes.length === 0 ? (
        <div className='text-center'>
          <h2>There doesn't seem to be anything here...</h2><br />
          <h2 style={buttonStyle}>Get started by </h2><button style={buttonStyle} className='btn btn-md btn-success' onClick={(e) => this.props.setView(e, 'browserecipes')}>browsing existing recipes</button><h2 style={buttonStyle}> or </h2><button style={buttonStyle} className='btn btn-success btn-md' onClick={(e) => this.props.setView(e, 'addrecipe')}>adding a recipe.</button>
        </div>
      ) : (
      <div>
          <h1 className='text-center title'>My Recipe Cloud</h1>
          <RecipeContainer
            recipes={this.state.recipes}
            user={this.state.user}
            tags={this.props.tags}
            setView={this.props.setView}
            changeUser={this.changeUser}
          />
        </div>
      )
    )}
  </div>

）

reactjsfont-awesome
16
David

私はなぜこれが起こっているのかを理解したと思います。 FontAwesome 5が<i>タグを<svg>タグに置き換える方法に関係しているようです。これは、DOMから要素を削除する方法Reactと互換性がありません。参照： https://fontawesome.com/how-to-use/svg-with-js ＃with-jquery

私が使用する回避策は、含めるドキュメントの 下部に記載 です。

<script>
  FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

私はそれをヘッダーに含めますが、それはより良い配置になるかもしれませんが、少なくとも私にとっては問題を解決するようです。他のクラス/ IDの直接の子であるFontAwesome要素に特に向けたクラスに対して持つことができるCSSロジックに影響を与える可能性があるため、すべてのスタイリングが正しくネストされていることを確認するだけでよい<svg>タグ内の<i>タグを置き換える代わりに.

または、<i>タグを自分でラップすることもできます。例えば：

{this.state.loading === true ? <div><i className="fa-spin fas fa-sync"></i></div> ...

動作するはずです。

更新（12/10/18）：公式ドキュメントでなぜこれが起こっているのか、このFontAwesomeをjavascriptライブラリ here と統合する方法の説明について、ドキュメンテーションにより良い説明があります。自動的に<i>タグをネストする方法は、FontAwesome javascriptライブラリ<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace-svg="nest"></script>を取得するためのスクリプトタグ内で行われます。また、この問題を解決する FontAwesome React library の公式サポートもあります。

38
Sir Neuman