React组件系统props与状态(state)

Posted 2020-08-20

 多个组件合成一个组件：

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={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‘));