用react标签写一个题解列表(用组件化的方式实现一个页面的方式)
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Solution from './components/solution';
import 'bootstrap/dist/css/bootstrap.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// container可以自适container,可以将所有内容放到comtainer里面
<React.StrictMode>
<div className="container">
<Solution />
</div>
</React.StrictMode>
);
solution.jsx
// imrc
import React, { Component } from 'react';
// cc
class Solution extends Component {
state = {
// 定义一堆solutions,solutions是一个列表,列表可以定义他的一些属性
solutions:[
{key:0 ,number:1164, title:"加工零件1",views:2930},
{key:1 ,number:1165, title:"加工零件2",views:2931},
{key:2 ,number:1166, title:"加工零件3",views:2932},
{key:3 ,number:1167, title:"加工零件4",views:2933},
{key:4 ,number:1168, title:"加工零件5",views:2934},
{key:5 ,number:1169, title:"加工零件6",views:2935},
{key:6 ,number:1170, title:"加工零件7",views:2936},
{key:7 ,number:1171, title:"加工零件8",views:2937},
]
};
// 我们需要知道删除的是谁,所以删除函数需要给一个参数
// 我们需要找到对应的solution然后将他删掉
handleDelete=(s)=>{
// 数组或者列表有一个函数filter(),可以帮我们过滤数组,它会依次将solutions里的每一个元素作用一遍我们的函数
// filter里面传一个函数这个函数有一个返回值,返回值是true或者false
// 如果返回值是true的话就将他保留,false就删除,应该保留所有跟solution不一样的元素
// 因为我们要删除的是solution,那么其余的都要保留
// 遍历一下solutions里的所有元素如果不一样的话,就把他保留下来,然后将这个值存到const solutions里面
const solutions=this.state.solutions.filter(solution=>solution!==s)
//更新solutions
this.setState({
solutions:solutions
// 如果key和value是一样的可以只写一个
// 写成:solutions
})
}
handleAdd=(s)=>{
const solutions=[...this.state.solutions,{
key:this.state.solutions[this.state.solutions.length-1].key+1 ,number:s.number, title:s.title,views:s.views
}];
this.setState({
solutions:solutions
})
}
render() {
//当我们把所有元素删完之后,把table删掉换一个新的写法
if(this.state.solutions.length===0){
return <p>没有题解拉!</p>
}
return (
// table.table>thead>tr>th*4
<table className="table">
<thead>
<tr>
<th>#</th>
<th>标题</th>
<th>阅读</th>
<th>操作1</th>
<th>操作2</th>
</tr>
</thead>
<tbody>
{/* 遍历所有solutions,凡是换行的地方都要加小括号 */}
{this.state.solutions.map(solution=>(
<tr key={solution.key}>
<td>{solution.number}</td>
<td>{solution.title}</td>
<td>{solution.views}</td>
{/* button里面绑定一个删除函数 */}
<td><button onClick={()=>this.handleDelete(solution)} className='btn btn-outline-danger'>删除</button></td>
<td><button onClick={()=>this.handleAdd(solution)} className='btn btn-outline-success'>添加</button></td>
</tr>
))}
</tbody>
</table>
);
}
}
export default Solution;
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
p{
font-size: 24px;
font-weight: 600;
color: gray;
margin:50px;
}