Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f1c357b

Browse files
'练习小案例'
1 parent 45a8e13 commit f1c357b

File tree

7 files changed

+513
-38
lines changed

7 files changed

+513
-38
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^5.16.4",
77
"@testing-library/react": "^13.2.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"prop-types": "^15.8.1",
910
"react": "^18.1.0",
1011
"react-dom": "^18.1.0",
1112
"react-scripts": "5.0.1",

‎src/App.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
import "./App.css";
2-
import List from "./components/List";
3-
import Count from "./components/Count";
1+
import "./App.css"
2+
import List from "./components/List"
3+
import Count from "./components/Count"
4+
import Comment from "./components/Comment"
45

5-
function App() {
6-
const list = ["Vue", "React", "Angular"];
6+
function App () {
7+
const list = ["Vue", "React", "Angular"]
8+
let sendMsg = (msg) => {
9+
console.log(msg)
10+
}
711
return (
812
<div className="App">
9-
<List data={list}></List>
13+
<List list={list}sendMsg={sendMsg}></List>
1014
<Count></Count>
15+
<Comment></Comment>
1116
</div>
12-
);
17+
)
1318
}
1419

15-
export default App;
20+
export default App

‎src/components/Comment/index.css‎

Lines changed: 286 additions & 0 deletions
Large diffs are not rendered by default.

‎src/components/Comment/index.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import './index.css'
2+
import React, { createRef } from 'react'
3+
const avatar = 'https://p9-passport.byteacctimg.com/img/user-avatar/4e9e751e2b32fb8afbbf559a296ccbf2~300x300.image'
4+
5+
// 时间格式化
6+
function formatDate (time) {
7+
return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
8+
}
9+
10+
class Comment extends React.Component {
11+
commentInput = createRef()
12+
state = {
13+
// hot: 热度排序 time: 时间排序
14+
tabs: [
15+
{
16+
id: 1,
17+
name: '热度',
18+
type: 'hot'
19+
},
20+
{
21+
id: 2,
22+
name: '时间',
23+
type: 'time'
24+
}
25+
],
26+
active: 'hot',
27+
list: [
28+
{
29+
id: 1,
30+
author: '刘德华',
31+
comment: '给我一杯忘情水',
32+
time: new Date('2021年10月10日 09:09:00'),
33+
// 1: 点赞 0:无态度 -1:踩
34+
attitude: 1
35+
},
36+
{
37+
id: 2,
38+
author: '周杰伦',
39+
comment: '哎哟,不错哦',
40+
time: new Date('2021年10月11日 09:09:00'),
41+
// 1: 点赞 0:无态度 -1:踩
42+
attitude: 0
43+
},
44+
{
45+
id: 3,
46+
author: '五月天',
47+
comment: '不打扰,是我的温柔',
48+
time: new Date('2021年10月11日 10:09:00'),
49+
// 1: 点赞 0:无态度 -1:踩
50+
attitude: -1
51+
}
52+
],
53+
commentText: ''
54+
}
55+
toggleTab = (e, type) => {
56+
type === 'hot' ? this.setState({ active: 'hot' }) : this.setState({ active: 'time' })
57+
}
58+
comment = () => {
59+
// let comment = this.commentInput.current.value //非受控组件
60+
let comment = this.state.commentText
61+
if (!comment) return
62+
let list = [...this.state.list, {
63+
id: Date.now(),
64+
author: '刘德华',
65+
comment,
66+
time: new Date(),
67+
// 1: 点赞 0:无态度 -1:踩
68+
attitude: 1
69+
},]
70+
this.setState({ list })
71+
}
72+
change = (e) => {
73+
this.setState({
74+
commentText: e.target.value
75+
})
76+
}
77+
del (e, id) {
78+
let list = this.state.list.filter(item => item.id !== id)
79+
this.setState({ list })
80+
}
81+
toggleLike = (e, id, attitude) => {
82+
let list = this.state.list.map(item => {
83+
if (item.id === id) {
84+
attitude === 'like' ? item.attitude === 1 ? item.attitude = 0 : item.attitude = 1 : item.attitude === -1 ? item.attitude = 0 : item.attitude = -1
85+
return item
86+
} else {
87+
return item
88+
}
89+
})
90+
this.setState({
91+
list
92+
})
93+
94+
}
95+
render () {
96+
return (
97+
<div className="App">
98+
<div className="comment-container">
99+
{/* 评论数 */}
100+
<div className="comment-head">
101+
<span>{this.state.list.length} 评论</span>
102+
</div>
103+
{/* 排序 */}
104+
<div className="tabs-order">
105+
<ul className="sort-container">
106+
{
107+
this.state.tabs.map(item => (
108+
<li onClick={(e) => this.toggleTab(e, item.type)} key={item.id} className={item.type === this.state.active ? 'on' : ''}>按{item.name}排序</li>
109+
))
110+
}
111+
</ul>
112+
</div>
113+
114+
{/* 添加评论 */}
115+
<div className="comment-send">
116+
<div className="user-face">
117+
<img className="user-head" src={avatar} alt="" />
118+
</div>
119+
<div className="textarea-container">
120+
<textarea
121+
cols="80"
122+
rows="5"
123+
placeholder="发条友善的评论"
124+
className="ipt-txt"
125+
ref={this.commentInput}
126+
value={this.state.commentText}
127+
onChange={this.change}
128+
/>
129+
<button className="comment-submit" onClick={this.comment}>发表评论</button>
130+
</div>
131+
<div className="comment-emoji">
132+
<i className="face"></i>
133+
<span className="text">表情</span>
134+
</div>
135+
</div>
136+
137+
{/* 评论列表 */}
138+
<div className="comment-list">
139+
{
140+
this.state.list.map(item => (
141+
<div className="list-item" key={item.id}>
142+
<div className="user-face">
143+
<img className="user-head" src={avatar} alt="" />
144+
</div>
145+
<div className="comment">
146+
<div className="user">{item.author}</div>
147+
<p className="text">{item.comment}</p>
148+
<div className="info">
149+
<span className="time">{formatDate(item.time)}</span>
150+
<span className={item.attitude === 1 ? 'like liked' : 'like'} onClick={(e) => this.toggleLike(e, item.id, 'like')}>
151+
<i className="icon" />
152+
</span>
153+
<span className={item.attitude === -1 ? 'hate hated' : 'hate'} onClick={(e) => this.toggleLike(e, item.id, 'hate')}>
154+
<i className="icon" />
155+
</span>
156+
<span className="reply btn-hover" onClick={(e) => this.del(e, item.id)}>删除</span>
157+
</div>
158+
</div>
159+
</div>
160+
))
161+
}
162+
</div>
163+
</div>
164+
</div>)
165+
}
166+
}
167+
168+
169+
export default Comment

‎src/components/Count/index.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1-
import "./index.css";
2-
import { useState} from "react";
1+
import "./index.css"
2+
import { useState,useEffect} from "react"
33
const Count = () => {
4-
const [count, setcount] = useState(0);
4+
// useState
5+
const [count, setcount] = useState(0)
56

6-
function add() {
7-
setcount(count + 1);
7+
useEffect(() => {
8+
document.title = `You click ${count} times`
9+
10+
return () => {
11+
console.log("jiesu")
12+
}
13+
}, [count])
14+
15+
function add () {
16+
setcount(count + 1)
817
}
918

10-
function reduce() {
11-
setcount(count - 1);
19+
function reduce() {
20+
setcount(count - 1)
1221
}
1322

1423
return (
@@ -21,7 +30,7 @@ const Count = () => {
2130
+
2231
</span>
2332
</div>
24-
);
25-
};
33+
)
34+
}
2635

27-
export default Count;
36+
export default Count

‎src/components/List/index.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import "./index.css";
2-
const List = (props) => {
3-
let list = props?.data ?? [];
4-
console.log(props);
1+
import "./index.css"
2+
const List = ({ list, sendMsg }) => {
3+
// let list = props?.list ?? []
4+
// console.log(sendMsg)
5+
function getMsg () {
6+
sendMsg('子组件传递的信息')
7+
}
58
return (
69
<div>
7-
<ul className="box">
10+
<ul className="box"onClick={getMsg}>
811
{list.map((v) => {
912
return (
1013
<li
@@ -15,11 +18,15 @@ const List = (props) => {
1518
{v}
1619
{v === "React" ? <span>1111</span> : null}
1720
</li>
18-
);
21+
)
1922
})}
2023
</ul>
2124
</div>
22-
);
23-
};
25+
)
26+
}
27+
List.defaultProps = {
28+
list: [],
29+
test: 'test'
30+
}
2431

25-
export default List;
32+
export default List

‎src/index.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import './index.css'
4+
import App from './App'
5+
import reportWebVitals from './reportWebVitals'
66

7-
const root = ReactDOM.createRoot(document.getElementById('root'));
7+
const root = ReactDOM.createRoot(document.getElementById('root'))
88
root.render(
9-
<React.StrictMode>
10-
<App />
11-
</React.StrictMode>
12-
);
9+
<App />
10+
)
1311

1412
// If you want to start measuring performance in your app, pass a function
1513
// to log results (for example: reportWebVitals(console.log))
1614
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17-
reportWebVitals();
15+
reportWebVitals()

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /