无法在React中使用FontAwesome在'Node'上执行'removeChild' [英] Failed to execute 'removeChild' on 'Node' with FontAwesome in React

问题描述

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

I'm getting the following error whenever I try to use a FontAwesome spinner icon (with className='fa-spin') in 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)

编辑:该问题已经出现了好几次了，并且代码本身确实没有什么特别的.我一直使用微调器作为加载图标，并且每当用内容替换微调器时都会发生错误.示例:

The issue has come up a couple of times now, and there's really nothing special about the code itself. I've been using the spinner as a loading icon, and the error occurs whenever the spinner is replaced with content. Example:

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>

)

推荐答案

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

I think i figured out why this is happening. It appears it has to do with the way FontAwesome 5 replaces <i> tags with <svg> tags. I believe this is incompatible with the way React handles removing elements from the DOM. see: https://fontawesome.com/how-to-use/svg-with-js#with-jquery

我使用的解决方法是该文档的底部，其中包括:

The workaround I use is noted at the bottom of that documentation which is to include:

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

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

I include it in my header, which there might be a better placement for it, but it appears to resolve the issue for me at least. It might affect some CSS logic you could have for any classes which you have directed specifically at FontAwesome elements that are direct children of other classes/ids so you might want to just check to make sure all of your styling looks right, since it's now nesting the <svg> tag within the <i> tag instead of replacing it.

或者，您也可以自己包装<i>标记. 例如:

Alternatively you could just wrap the <i> tag yourself. For example:

{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库的官方支持也可以解决此问题.

UPDATE (12/10/18): Now there is a better explanation in the documentation for why this is happening in the official docs and an explanation for how to integrate this FontAwesome with a javascript library here. The method for automatically nesting your <i> tags is now done inside the script tag for fetching the FontAwesome javascript library <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace-svg="nest"></script>. There is also now official support for the FontAwesome React library which resolves this issue as well.

这篇关于无法在React中使用FontAwesome在'Node'上执行'removeChild'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！