每当我尝试在 React 中使用 FontAwesome 旋转图标(带有 className='fa-spin'
)时,都会收到以下错误:
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>
)
最佳答案
我想我明白为什么会发生这种情况。看来这与 FontAwesome 5 取代 <i>
的方式有关。标签为 <svg>
标签。我相信这与 React 处理从 DOM 中删除元素的方式不兼容。请参阅:https://fontawesome.com/how-to-use/svg-with-js#with-jquery
我使用的解决方法是 noted at the bottom该文档包括:
<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> ...
应该可以。
更新(2018 年 12 月 10 日):
现在官方文档中对为什么会发生这种情况有了更好的解释,并解释了如何将此 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 的官方支持这也解决了这个问题。
关于reactjs - 无法在 React 中使用 FontAwesome 在 'removeChild' 上执行 'Node',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48358529/