React的小坑记录

在日常使用React的时候,我们总会遇到些坑,用一篇小Note做下记录,方便日后查找。
1、先看下面这段代码

        let names=['Perl','Urus'];
        var myCompents =React.createClass({
            render:function(){
                return
                    <div>
                    { 
                        names.map(function(name){
                            return <div key={name}>Hello,{name}!</div>
                        })
                    }
                    </div>
            }
        });
        ReactDOM.render(
            <myCompents />,
            document.getElementById('reactContainer')
        )


格式化的非常好看对吗?但是这是会报错的。问题解决的方法如下:
1.1 return后面必须接一个返回值,哪怕就是一个空的div都必须直接跟return在同一行。
1.2 变量命名,如果你之前跟我一样有习惯用小写字母开头命名变量,那么在渲染这段代码的时候页面会是空白的,也不会报错,如果你不注意这一点,压根连问题出在哪都不知道,让人哭笑不得。。。
正确的代码应该是下面这样的:

        let names=['Perl','Urus'];
        var MyCompents =React.createClass({
            render:function(){
                return <div>
                    { 
                        names.map(function(name){
                            return <div key={name}>Hello,{name}!</div>
                        })
                    }
                    </div>
            }
        });
        ReactDOM.render(
            <MyCompents />,
            document.getElementById('reactContainer')
        )

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

在这输入验证码 : *

Reload Image