首页 > 代码库 > React组件系统、props与状态(state)
React组件系统、props与状态(state)
多个组件合成一个组件:
var style = { fontSize: 20, color: ‘#ff0000‘ }; var WebSite = React.createClass({ render: function () { return ( <div style={style}> <Name name={this.props.name} /> <Link link={this.props.link} /> </div> ); } }); var Name = React.createClass({ render: function () { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function () { return ( <a href=http://www.mamicode.com/{this.props.link}>{this.props.link}</a> ) } }); React.render(<WebSite name="lqc" link="www.baidu.com" />, document.getElementById(‘example‘));
State状态
getInitialState: function () { return {object: false;} }
this.setState({object: !this.state.object});
var LikeButton = React.createClass({ getInitialState: function () { return {liked: false}; }, handleClick: function (event) { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? ‘喜欢‘ : ‘不喜欢‘; return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ); } }); React.render(<LikeButton/>, document.getElementById(‘example‘));
React组件系统、props与状态(state)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。