Commit 45a8e13

committed

学习hook-state

1 parent da9abd0 commit 45a8e13Copy full SHA for 45a8e13

File tree

+94

-16

lines changed

+94

-16

lines changed

Lines changed: 6 additions & 16 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,23 +1,13 @@`
`1`		`-import logo from './logo.svg';`
`2`		`-import './App.css';`
	`1`	`+import "./App.css";`
	`2`	`+import List from "./components/List";`
	`3`	`+import Count from "./components/Count";`
`3`	`4`
`4`	`5`	`function App() {`
	`6`	`+ const list = ["Vue", "React", "Angular"];`
`5`	`7`	`return (`
`6`	`8`	`<div className="App">`
`7`		`- <header className="App-header">`
`8`		`- <img src={logo} className="App-logo" alt="logo" />`
`9`		`- <p>`
`10`		`- Edit <code>src/App.js</code> and save to reload.`
`11`		`- </p>`
`12`		`- <a`
`13`		`- className="App-link"`
`14`		`- href="https://reactjs.org"`
`15`		`- target="_blank"`
`16`		`- rel="noopener noreferrer"`
`17`		`- >`
`18`		`- Learn React`
`19`		`- </a>`
`20`		`- </header>`
	`9`	`+ <List data={list}></List>`
	`10`	`+ <Count></Count>`
`21`	`11`	`</div>`
`22`	`12`	`);`
`23`	`13`	`}`

Lines changed: 22 additions & 0 deletions

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+import "./index.css";`
	`2`	`+import { useState } from "react";`
	`3`	`+const Count = () => {`
	`4`	`+ const [count, setcount] = useState(0);`
	`5`	`+`
	`6`	`+ function add() {`
	`7`	`+ setcount(count + 1);`
	`8`	`+ }`
	`9`	`+`
	`10`	`+ function reduce() {`
	`11`	`+ setcount(count - 1);`
	`12`	`+ }`
	`13`	`+`
	`14`	`+ return (`
	`15`	`+ <div className="count-box">`
	`16`	`+ <span className="btn" onClick={reduce}>`
	`17`	`+ -`
	`18`	`+ </span>`
	`19`	`+ <span className="content">{count}</span>`
	`20`	`+ <span className="btn" onClick={add}>`
	`21`	`+ +`
	`22`	`+ </span>`
	`23`	`+ </div>`
	`24`	`+ );`
	`25`	`+};`
	`26`	`+`
	`27`	`+export default Count;`

Lines changed: 14 additions & 0 deletions

Lines changed: 25 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,25 @@`
	`1`	`+import "./index.css";`
	`2`	`+const List = (props) => {`
	`3`	`+ let list = props?.data ?? [];`
	`4`	`+ console.log(props);`
	`5`	`+ return (`
	`6`	`+ <div>`
	`7`	`+ <ul className="box">`
	`8`	`+ {list.map((v) => {`
	`9`	`+ return (`
	`10`	`+ <li`
	`11`	+ className={`box-item${v === "React" ? "-react" : ""}`}
	`12`	`+ key={v}`
	`13`	`+ style={{ height: "50px", lineHeight: "50px" }}`
	`14`	`+ >`
	`15`	`+ {v}`
	`16`	`+ {v === "React" ? <span>1111</span> : null}`
	`17`	`+ </li>`
	`18`	`+ );`
	`19`	`+ })}`
	`20`	`+ </ul>`
	`21`	`+ </div>`
	`22`	`+ );`
	`23`	`+};`
	`24`	`+`
	`25`	`+export default List;`

Comments

(0)