需求：自定义组件，功能说明如下
1，显示h2标题，初始文本为：你喜欢我
2，点击标题更新为：我喜欢你
第一步：初始化状态值并渲染组件标签
组件只有两种状态，“我喜欢你”和“你喜欢我”，因此只需要定义一个布尔变量，通过更新布尔变量的值，控制两种情况的渲染。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> </head> <body> <div id="test"></div> </body> </html> <script type="text/babel"> class LikeComponent extends React.Component{ //初始化状态 constructor(props){ super(props) this.state={ islike:false, } } render(){
const {islike} = this.state; return <h2>{islike?'我喜欢你':'你喜欢我'}</h2> //读取某个状态值 } } ReactDOM.render(<LikeComponent/>,document.getElementById("test")); </script>
第二步，做交互，通过点击文本 ----> 改变布尔值 -----> 来更新状态
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 <div id="test"></div> 13 </body> 14 </html> 15 <script type="text/babel"> 16 17 class LikeComponent extends React.Component{ 18 //初始化状态 19 constructor(props){ 20 super(props) 21 this.state={ 22 islike:false, 23 } 24 25 this.stateChange=this.stateChange.bind(this); //将新增方法中的this强制绑定为组件对象 26 } 27 stateChange(){ 28 console.log(this);//LikeComponent 29 const islike=!this.state.islike; //得到状态并取反,不能这样写const {islike}=!this.state; 30 this.setState({islike});//更新状态 31 } 32 render(){ 33 const {islike}=this.state;//读状态 34 return <h2 onClick={this.stateChange}>{islike?'我喜欢你':'你喜欢我'}</h2> 35 } 36 } 37 ReactDOM.render(<LikeComponent/>,document.getElementById("test")); 38 </script>