React: Whitespace text nodes cannot appear as a child of <tr>. Make sure....警告的解决办法

最新推荐文章于 2026-07-16 10:42:49 发布

原创最新推荐文章于 2026-07-16 10:42:49 发布 · 5.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文详细解析了React新手常遇到的一个问题：页面虽能正常显示，却出现令人不安的红色警告。通过实例代码展示，揭示<tr><MyTd/></tr>间多余空格导致的问题，并提供简单有效的解决方案。

警告信息如图所示
初学React碰到这个问题，虽然页面能正常显示，但是这红色警告看着真的让人不舒服。
找了很久终于发现了问题出在哪里
错误代码如下：

class MyTable extends React.Component{
            constructor(props){
                super(props);
                this.state = {}
            }
            render(){
                return (
                    <table>
                        <thead>
                           <tr>  <MyTd/></tr>
                        </thead>
                       <tbody>
                            <MyTr/>
                       </tbody>
                    </table>
                )
            }
        }

错误的原因是<tr> <MyTd/></tr>之间的空格…将多余的空格删除即可

标签

#react