Learning react (Record)

Copyright: duck https://blog.csdn.net/weixin_43462746/article/details/91588668 have to refuel every day

JSX learn grammar through the array of hit console reported this wrong "react-dom.js: 18118 Uncaught Error : HelloComponent.render ():. A valid React element (or null) must be returned You may have returned undefined, an array or some other invalid object ".
Google translate to (react-dom.js: 18118 uncaught error: HelloComponent.render (): must return a valid React element (or null) You may have to return undefined, an array or some other invalid. Object).
affixed source and cap:
Here Insert Picture Description
the reason is lead behind the return line feed could not be resolved correctly, or modified so as not to have to wrap the wrap, then add () can be wrapped, attach code blocks after treatment

1
<script type="text/babel">
        // var HelloComponent=React.createClass({
        //     render :function(){
        //         return <span>我是谁,今年{this.props.age}岁了</span>
        //     }
        // });
        // ReactDOM.render(
        //     <HelloComponent age="22"/>,document.getElementById("helloContainer")
        // )
        //大小写一定要规范 不容有错

            let names=['jspang','技术胖','人之初','性本善'];
            var HelloComponent=React.createClass({
                render:function(){return<div>{ names.map(function(name){return(
                    <div key={name}>Hello,{name}</div>)}) }</div>
                }
            });
            ReactDOM.render(
                <HelloComponent name="猪大侠"/>,document.getElementById("reactContainer")
            )
    </script>
    ```2
     <script type="text/babel">
        // var HelloComponent=React.createClass({
        //     render :function(){
        //         return <span>我是谁,今年{this.props.age}岁了</span>
        //     }
        // });
        // ReactDOM.render(
        //     <HelloComponent age="22"/>,document.getElementById("helloContainer")
        // )
        //大小写一定要规范 不容有错

            let names=['jspang','技术胖','人之初','性本善'];
            var HelloComponent=React.createClass({
                render:function(){return<div>{ names.map(function(name){return<div key={name}>Hello,{name}</div>}) }</div>
                }
            });
            ReactDOM.render(
                <HelloComponent name="猪大侠"/>,document.getElementById("reactContainer")
            )
    </script>

Guess you like

Origin blog.csdn.net/weixin_43462746/article/details/91588668