用react实现点击切换文本信息

思考：
1）要改变文本的内容，则是会涉及到状态的改变，那么创建组件的方式就要用到ES6类组件的方式来处理；
2）状态值用一个布尔值，通过点击事件更改状态值，三元表达式来确定文本信息；
3）再将组件渲染到页面
具体实现代码如下：

//创建组件
 class Like extends React.Component{
    constructor(props){
        super(props);
        //初始化状态
        this.state = {
            liked:false
        };
        //绑定this
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        //更新状态值
        const liked = !this.state.liked;
        this.setState({liked});
    }
    render() {
        //获得状态值
        const {liked} = this.state;
        return (
            <h2 onClick={this.handleClick}>{liked ?'like':'hate'}</h2>
        )
    }
}
//渲染组件
 ReactDOM.render(<Like/>,document.getElementById('example'));

效果如下：

2018-07-22 19-14-03 的屏幕截图.png 2018-07-22 19-13-58 的屏幕截图.png
2018-07-22 19-13-41 的屏幕截图.png 2018-07-22 19-13-29 的屏幕截图.png