xxx

exercise3/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "exercise3",
+  "name": "exercise4",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -6396,16 +6396,15 @@
       "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npm.taobao.org/fast-glob/download/fast-glob-3.2.5.tgz?cache=0&sync_timestamp=1610876574130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-3.2.5.tgz",
-      "integrity": "sha1-eTmvKmVt55pPGQGQPuityqfLlmE=",
+      "version": "3.2.6",
+      "resolved": "https://registry.nlark.com/fast-glob/download/fast-glob-3.2.6.tgz?cache=0&sync_timestamp=1624814011301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffast-glob%2Fdownload%2Ffast-glob-3.2.6.tgz",
+      "integrity": "sha1-Q03ZUphFF26gSazJND6CgnZcbho=",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
+        "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "micromatch": "^4.0.4"
       }
     },
     "fast-json-stable-stringify": {
@@ -12983,7 +12982,7 @@
     },
     "sane": {
       "version": "4.1.0",
-      "resolved": "https://registry.nlark.com/sane/download/sane-4.1.0.tgz",
+      "resolved": "https://registry.nlark.com/sane/download/sane-4.1.0.tgz?cache=0&sync_timestamp=1624844585538&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsane%2Fdownload%2Fsane-4.1.0.tgz",
       "integrity": "sha1-7Ygf2SJzOmxGG8GJ3CtsAG8//e0=",
       "requires": {
         "@cnakazawa/watch": "^1.0.3",
@@ -14138,7 +14137,7 @@
     },
     "terser": {
       "version": "4.8.0",
-      "resolved": "https://registry.nlark.com/terser/download/terser-4.8.0.tgz",
+      "resolved": "https://registry.nlark.com/terser/download/terser-4.8.0.tgz?cache=0&sync_timestamp=1624884102109&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fterser%2Fdownload%2Fterser-4.8.0.tgz",
       "integrity": "sha1-YwVjQ9fHC7KfOvZlhlpG/gOg3xc=",
       "requires": {
         "commander": "^2.20.0",
@@ -14234,9 +14233,9 @@
           "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
         },
         "terser": {
-          "version": "5.7.0",
-          "resolved": "https://registry.nlark.com/terser/download/terser-5.7.0.tgz",
-          "integrity": "sha1-p2Hu7CBryHtgWrEwKYdurZOK5pM=",
+          "version": "5.7.1",
+          "resolved": "https://registry.nlark.com/terser/download/terser-5.7.1.tgz?cache=0&sync_timestamp=1624884102109&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fterser%2Fdownload%2Fterser-5.7.1.tgz",
+          "integrity": "sha1-LcemEAm2a7Y4MFyyqCR2OxFr94Q=",
           "requires": {
             "commander": "^2.20.0",
             "source-map": "~0.7.2",

exercise3/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "exercise3",
+  "name": "exercise4",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

exercise3/src/App.js

@@ -1,25 +1,24 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import React from 'react';
+import Toast from './components/index'
+class App extends React.Component{
+  constructor(){
+    super()
+  }
+  show=()=>{
+    Toast({
+      text: "呵呵呵呵呵呵!",
+      time: 5000,
+      test: () => {
+        alert("执行成功");
+      },
+    })
+  }
+  render() {
+    return(
+      <div className="app">
+        <button  onClick={this.show.bind(this)}>点击开始</button>
+      </div>
+    )
+  }
 }
-
 export default App;

exercise3/src/components/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDom from "react-dom";
+import Toast from './toast'
+export default function(op){
+    let div=document.createElement('div');
+    let time=op.time;
+    document.body.appendChild(div);
+    let toastInt = ReactDom.render(<Toast />, div);
+    toastInt.setOps(op);
+    setTimeout(()=>{
+        document.body.removeChild(div);
+        op.test();
+    },time)
+}

exercise3/src/components/style.css

@@ -0,0 +1,13 @@
+.toast{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 200px;
+    height: 60px;
+    color: #fff;
+    font-size: 16px;
+    line-height: 60px;
+    text-align: center;
+    background-color: rgba(0,0,0,0.8); 
+ }

exercise3/src/components/toast.js

@@ -0,0 +1,23 @@
+import React from 'react'
+// import logo from './logo.svg';
+import './style.css'
+class Toast extends React.Component{
+    constructor(){
+        super()
+        this.state={
+            text:"xxxx"
+        }
+    }
+    setOps(ops) {
+        this.setState({ text: ops.text });
+      }
+    render(){
+        return(
+            <div className="toast">
+                {this.state.text}
+            </div>
+        )
+    }
+    
+}
+export default Toast

project/p9/src/App.js

@@ -6,7 +6,7 @@ class App extends React.Component {
     super();
     this.state = {};
   }
-  show() {
+  show=()=> {
     Toast({
       text: "呵呵呵呵呵呵!",
       duration: 5000,
@@ -24,6 +24,7 @@ class App extends React.Component {
       </div>
     );
   }
+ 
 }
 
 export default App;