6 click Events&A Basic Lifecycle Method

最新推荐文章于 2021-07-29 17:11:20 发布

wirenc

最新推荐文章于 2021-07-29 17:11:20 发布

阅读量298

点赞数

分类专栏： react for everyone

本文链接：https://blog.youkuaiyun.com/wirenc/article/details/54773517

版权

react for everyone 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
 <html>
     <head>
           <script src="https://unpkg.com/react@15/dist/react.js"></script>
            <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>

     </head>
     <body>
            <div id="area" ></div>
            <script type="text/babel">
                var HelloWorld = React.createClass({
                        propTypes:{
                            name: React.PropTypes.string,
                            isPerson: React.PropTypes.bool
                        },
                    getDefaultProps: function(){
                        return{
                            name:'scott'
                        }
                    },

                    getInitialState:function(){
                        return{
                            value:1
                        }
                    },
                    componentDidMount: function(){
                        <!--this.setState({
                            value:this.state.value+9
                        });-->
                    },
                    _addByOne:function(){
                       this.setState({
                            value:this.state.value+1
                        });

                    },
                    _hello:function(){
                        return(
                            <h1>Hello</h1>
                        )
                    },

                    render:function(){
                        var greeting ="world";
                        if(this.props.isPerson){
                greeting =(<Person name={this.props.name}} />)
                        }
                        return(
                            <div>

                            <span> hello <greeting} </span>
                            {this.state.value}
                <button onClick={this._addByOne()}>Click Me</button>
                            </div>
                        )
                    }
                });
                 var Person = React.createClass({
                        propTypes:{
                            name: React.PropTypes.string.isRequired
                        },
                    getDefaultProps: function(){
                        return{
                            name:'scott'
                        }
                    },
                    render:function(){
                        return(
                             <div>
                            <span> {this.props.name}</span>
                             </div>
                        )
                    }
                });
                ReactDOM.render(
                    <HelloWorld  name=‘Tim' isPerson={true} />,
                    document.getElementById('area'),
                );

            </script>

     </body>
 </html>