每当我尝试className='fa-spin'在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
<i>
<svg>
该文档的底部列出了我使用的解决方法,该方法包括:
<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库也获得了官方支持,该库也解决了此问题。
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" data-auto-replace- svg="nest"></script>