Web应用课——5.1 React——配置环境、ES6语法补充、Components——用react标签写一个题解列表（solutions-app）

作者： 作者的头像   ._675 ,  2023-05-23 23:29:58 ,  所有人可见 ,  阅读 46

0


用react标签写一个题解列表(用组件化的方式实现一个页面的方式)

屏幕截图 2023-05-23 232600.png

目录结构

屏幕截图 2023-05-23 232918.png

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;
}

0 评论