无法在React中使用FontAwesome在'Node'上执行'removeChild'

Question

每当我尝试className='fa-spin'在React中使用FontAwesome微调器图标（带有）时，都会出现以下错误：

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>

）

Answer 1

我想我知道为什么会这样。看来这与FontAwesome
5用<i>标签替换标签的方式有关<svg>。我相信这与React处理从DOM中删除元素的方式不兼容。参见：https : //fontawesome.com/how-to-use/svg-with-
js#with-jquery

该文档的底部列出了我使用的解决方法，该方法包括：

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

我将其包含在标题中，可能会有更好的放置位置，但是它似乎至少可以解决我的问题。这可能会影响您对专门针对FontAwesome元素的任何类的某些CSS逻辑，这些元素是其他类/
id的直接子元素，因此您可能只需要检查以确保所有样式看起来正确即可，因为它现在正在嵌套在<svg>该范围内标签<i>的标签，而不是取代它。

另外，您也可以<i>自己包装标签。例如：

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

应该管用。

更新（12/10/18）：现在在文档中有一个更好的解释，说明为什么在官方文档中会发生这种情况，并在此处解释了如何将此FontAwesome与javascript库集成。<i>现在，在脚本标签内部完成了自动嵌套标签的方法，以获取FontAwesome
javascript库<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace- svg="nest"></script>。现在，FontAwesome
React库也获得了官方支持，该库也解决了此问题。