React小示例

ES6模式的数据渲染

class LikeButton extends React.Component{
    constructor(){
        super();
        this.state = {
            liked: false
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState({liked: !this.state.liked});
    }
    render(){
        const text = this.state.liked ? 'liked' : 'haven\'t liked';
        return (
            <div onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </div>
        );
    }
}

ReactDOM.render(
    <LikeButton />,
    document.querySelector('.example')
);

class HelloWorld extends React.Component{
    render(){
        return (
            <p>
                Hello, <input type='text' placeholder='Your name here' />
                It is {this.props.data.toTimeString()}
            </p>
        );
    }
}
function tick(){
    ReactDOM.render(
        <HelloWorld />,
        document.querySelector('.example')
    );
}
setInterval(tick, 1000);