5 working with state

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

wirenc

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

阅读量216

点赞数

分类专栏： react for everyone

本文链接：https://blog.csdn.net/wirenc/article/details/54773501

版权

react for everyone 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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
                        });
                    }
                    render:function(){
                        var greeting ="world";
                        if(this.props.isPerson){
                greeting =(<Person name={this.props.name}} />)
                        }
                        return(
                            <div>
                            <span> hello <greeting} </span>
                            {this.state.value}
                            </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>

wirenc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5 working with state

<!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>
复制链接

扫一扫