|
|
@@ -0,0 +1,74 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="../react.development.js"></script>
|
|
|
+ <script src="../react-dom.development.js"></script>
|
|
|
+ <script src="../babel.min.js"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="root"></div>
|
|
|
+ <script type="text/babel">
|
|
|
+ class Greeting extends React.Component {
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h3>你好，兄弟！</h3>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ class Counter extends React.Component {
|
|
|
+ // 添加状态
|
|
|
+ // 写法-1
|
|
|
+ state = {
|
|
|
+ name: '计数器',
|
|
|
+ count: 0, // 定义一个计数的状态值
|
|
|
+ };
|
|
|
+ // 写法-2
|
|
|
+ // constructor(props) {
|
|
|
+ // super(props); // 在继承关系中，下面代码要使用this 的话 必须先调用super父类的构造器才可以
|
|
|
+ // this.state = {};
|
|
|
+ // }
|
|
|
+ // 像vue那样 定义实例方法来作为事件监听器
|
|
|
+ // 2 修改状态：一定要保证其响应式，那么只能通过 组件实例的setState方法
|
|
|
+ reduceOne() {
|
|
|
+ // console.log(this);
|
|
|
+ // 类Vue，如果直接修改state可以吗？
|
|
|
+ // this.state.count--;// wrong
|
|
|
+ // 正确做法
|
|
|
+ this.setState({
|
|
|
+ count: this.state.count - 1,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ addOne = () => {
|
|
|
+ // console.log(this);
|
|
|
+ this.setState({
|
|
|
+ count: this.state.count + 1,
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ render() {
|
|
|
+ // 1 在类组件中 通过this先拿到组件实例，然后通过访问state属性得到所有的状态。
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h3>{this.state.name}</h3>
|
|
|
+ <p>当前值：{this.state.count}</p>
|
|
|
+ <p>
|
|
|
+ <button onClick={this.reduceOne.bind(this)}>-</button>
|
|
|
+ <button onClick={this.addOne}>+</button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let element = <Counter />; // 将组件 => jsx(React元素)
|
|
|
+ ReactDOM.createRoot(document.querySelector('#root')).render(element);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
daxia