<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>state的简写形式</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> </body> <script type="text/babel"> //定义类组件 class MyComponent extends React.Component { //在类内部以以下形式声明对象或者方法是直接在实例对象上存在,原型对象上不存在 state = { isDog: true, color: '黑色' } changeAnimal = () => { const isDog = this.state.isDog this.setState({isDog: !isDog}) } render() { console.log(this) const { isDog, color } = this.state return ( <div onClick={this.changeAnimal}> <h1> <span>这是一只{isDog ? '狗' : '猫'},颜色是{color}</span> </h1> </div> ) } } //react渲染 ReactDOM.render(<MyComponent />, document.getElementById("test")) </script> </html>
标签:render,color,React,state,isDog,简写 From: https://www.cnblogs.com/jmsstudy/p/17591497.html