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 (
            

                You {text} this. Click to toggle.
            
        );
    }
}

ReactDOM.render(
    ,
    document.querySelector('.example')
);

class HelloWorld extends React.Component{
    render(){
        return (
            

                Hello, 
                It is {this.props.data.toTimeString()}
            
        );
    }
}
function tick(){
    ReactDOM.render(
        ,
        document.querySelector('.example')
    );
}
setInterval(tick, 1000);