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

Hw呀

于 2019-08-19 20:20:54 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_43855065/article/details/99758097

本文详细解析了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>之间的空格…将多余的空格删除即可