程序员经验分享-hwhale

React（五）- React组件的组合使用

2023-11-17

React系列文章导航

一. Todo案例

本篇文章主要是做一个Demo，功能如下：

  1. 显示所有的Todo列表。
  2. 输入文本，点击按钮显示到列表的收尾，并清除输入的文本。

初始架构图如下（其他文件夹中没有文件）：
在这里插入图片描述
App.jsx代码：

// 创建外壳组件App
import React, { Component } from 'react'
import './App.css'
// 暴露App组件，其他Js就可以引用了
export default class App extends Component {
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <div className="todo-header">
                        <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
                    </div>
                    <ul className="todo-main">
                        <li>
                            <label>
                                <input type="checkbox" />
                                <span>xxxxx</span>
                            </label>
                            <button className="btn btn-danger" style={{ display: 'none' }}>删除</button>
                        </li>
                        <li>
                            <label>
                                <input type="checkbox" />
                                <span>yyyy</span>
                            </label>
                            <button className="btn btn-danger" style={{ display: 'none' }}>删除</button>
                        </li>
                    </ul>
                    <div className="todo-footer">
                        <label>
                            <input type="checkbox" />
                        </label>
                        <span>
                            <span>已完成0</span> / 全部2
                        </span>
                        <button className="btn btn-danger">清除已完成任务</button>
                    </div>
                </div>
            </div>
        )
    }
}

App.css代码：提取码z9pj
index.js代码：

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'
// 渲染App到页面
ReactDOM.render(<App />, document.getElementById('root'))

页面效果如下：
在这里插入图片描述
目标，将App.jsx文件以及App.css文件中的代码进行组件分离：
在这里插入图片描述

最后分离的架构图如下：
在这里插入图片描述
代码：rx0h

放出部分比较直观的代码：
在这里插入图片描述
Item：
在这里插入图片描述
分离之后，紧接着对项目的各个功能进行编写，对于项目我们分为4个部分：
在这里插入图片描述

1.1 组件的具体实现

1.1.1 Header

安装nanoid：

npm install nanoid

Jsx：

import React, { Component } from 'react';
import { nanoid } from 'nanoid'

import './index.css'
import PropTypes from 'prop-types'

class Header extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    handleKeyUp = (event) => {
        // 1.结构赋值
        const { keyCode, target } = event
        // 2.判断是否按下了回车键，回车按键的编号是13
        if (keyCode !== 13) return
        // 3.判断添加的todo名字是否为空
        if (target.value.trim() === '') {
            alert('输入不能为空！')
            return
        }
        // 4.准备一个todo对象,nanoid()会随机生成一个UUID
        const todoObj = { id: nanoid(), name: target.value, done: false }
        // 5.将todoObj传递给App
        this.props.addTodo(todoObj)
        // 6.清空输入框
        target.value = ''
    }

    render() {
        return (
            <div className="todo-header">
                {/*onKeyUp指的是按键操作*/}
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        );
    }
}

export default Header;

css：

.todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}

.todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

1.1.2 List

Jsx：

import React, { Component } from 'react';
import Item from '../Item'
import PropTypes from 'prop-types'
import './index.css'

class List extends Component {
    static propTypes = {
        todos: PropTypes.array.isRequired,
        updateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired,
    }

    render() {
        const { todos, updateTodo, deleteTodo } = this.props
        return (
            <ul className="todo-main">
                {
                    todos.map(todo => {
                        return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo} />
                    })
                }
            </ul>
        );
    }
}

export default List;

Css：

.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
}

.todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
}

1.1.3 Item

Jsx：

import React, { Component } from 'react';
import './index.css'

class Item extends Component {

    state = { mouse: false }
    // 标识鼠标的出入事件
    handleMouse = (flag) => {
        return () => {
            this.setState({ mouse: flag })
        }
    }
    // 对于多选框勾选的回调函数
    handleCheck = (id) => {
        return (event) => {
            this.props.updateTodo(id, event.target.checked)
        }
    }

    handleDelete = (id) => {
        // 点击确定，则进行删除，若取消则不删除，会进行一个弹框
        if (window.confirm('确定删除吗？')) {
            this.props.deleteTodo(id)
        }
    }

    render() {
        const { id, name, done } = this.props
        const { mouse } = this.state

        return (
            // onMouseLeave 鼠标移除事件 onMouseEnter 鼠标移入事件
            <li style={{ backgroundColor: mouse ? '#ddd' : 'white' }} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" style={{ display: mouse ? 'block' : 'none' }} onClick={() => { this.handleDelete(id) }}>删除</button>
            </li>
        );
    }
}

export default Item;

Css：

li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

1.1.4 Footer

Jsx：

import React, { Component } from 'react';
import './index.css'

class Footer extends Component {
    // 全选checkBox的回调
    handleCheckAll = (event) => {
        this.props.checkAllTodo(event.target.checked)
    }

    // 清除已经完成任务的回调
    handleClearAll = () => {
        this.props.clearAllDone()
    }

    render() {
        const { todos } = this.props
        // 计算已经完成的个数
        const doneCount = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
        // 总数
        const total = todos.length

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={doneCount === total && total != 0 ? true : false} onChange={this.handleCheckAll} />
                </label>
                <span>
                    <span>已完成{doneCount}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={this.handleClearAll}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;

Css：

.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}

1.2 父类App组件的实现

App.jsx：

// 创建外壳组件App
import React, { Component } from 'react'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import './App.css'
// 暴露App组件，其他Js就可以引用了
export default class App extends Component {
    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '购物', done: false },
        ]
    }

    // 用于添加一个todo，接收了一个todo对象
    addTodo = (todoObj) => {
        // 获取原todo列表
        const { todos } = this.state
        // 追加一个todo
        const newTodos = [todoObj, ...todos]
        // 更新状态
        this.setState({ todos: newTodos })
    }

    // 更新一个Todo的状态
    updateTodo = (id, done) => {
        const { todos } = this.state
        const newTodos = todos.map((todoObj) => {
            // 对指定Id的对象，修改它的done属性
            if (todoObj.id === id) return { ...todoObj, done }
            else return todoObj
        })
        this.setState({ todos: newTodos })
    }

    // 删除一个Todo对象
    deleteTodo = (id) => {
        // 1.先获取原本的todo列表
        const { todos } = this.state
        // 2.删除指定Id的对象
        const newTodos = todos.filter(todoObj => {
            return todoObj.id !== id
        })
        // 3.更新状态
        this.setState({ todos: newTodos })
    }

    checkAllTodo = (done) => {
        const { todos } = this.state
        const newTodos = todos.map((obj) => {
            // 全选后，将所有对象的状态都改为true，即已选中
            return { ...obj, done }
        })
        this.setState({ todos: newTodos })
    }

    clearAllDone = () => {
        const { todos } = this.state
        const newTodos = todos.filter(todoObj => {
            return !todoObj.done
        })
        this.setState({ todos: newTodos })
    }

    render() {
        const { todos } = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
                </div>
            </div>
        )
    }
}

App.css:

body {
    background: #fff;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}

.btn:focus {
    outline: none;
}

.todo-container {
    width: 600px;
    margin: 0 auto;
}

.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

入口文件index.js：

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'
// 渲染App到页面
ReactDOM.render(<App />, document.getElementById('root'))

最后页面的效果图如下：
在这里插入图片描述
在这里插入图片描述

二. Todo案例的总结

关于父子类之间的通信：

  1. 父组件给子组件传递数据，通过props传递。
  2. 子组件给父组件传递数据，通过props传递，但是要求父组件提前传递一个函数。

例如代码中：
父组件App给子组件传递数据：
在这里插入图片描述
然后List组件中通过props标签来获取对应数据：
在这里插入图片描述

一个组件其状态在哪里，那么操作状态的方法就应该写在哪里。

例如：本案例中，我们都是对todos对象列表进行操作，而其定义在App组件中：
在这里插入图片描述
那么后续对该状态进行操作的一些函数，都应该写在App组件中：
在这里插入图片描述
而子组件中的调用，只是进行一层包装，例如：
在这里插入图片描述
就好比Java中，对Controller层–>Service层–>Dao层…

动态初始化列表，如何确定将数据放在哪个组件的state中？

  • 对于一个数据，若供给某个组件使用，那么放在该组件自身的state中。
  • 若供给一些组件去使用，那么放在它们共同的父组件state中。（官方称该操作为状态提升）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

React（五）- React组件的组合使用 的相关文章

  • React中的“计算属性”

    React中的 计算属性 相信许多学习过vue的小伙伴对计算属性都不陌生吧 计算属性能帮我们数据进行一些计算操作 计算属性是依赖于data里面的数据的 在vue中只要计算属性依赖的data值发生改变 则计算属性就会调用 那React中也有计

  • React重点知识拓展，含Hooks、路由懒加载等

    第7章 React扩展 一 setState 1 setState更新状态的2种写法 setState stateChange callback 对象式的setState stateChange为状态改变的对象 该对象可以体现出状态的更改

  • 虚拟列表的实现思路（附带react代码）

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算

  • React 初识之Umi项目搭建实战

    一 创建项目 创建之前需要安装 Node js 和 npm yarn 这俩个环境 在WebStorm里面创建一个项目 输入命令 yarn create umi 弹出选项 这里我们选择第二项APP 选择是否使用typescript 这里选no

  • react项目中使用react-dnd实现列表的拖拽排序

    现在有一个新需求就是需要对一个列表 实现拖拽排序的功能 要实现的效果如下图 可以通过 react dnd 或者 react beautiful dnd 两种方式实现 今天先讲下使用react dnd是如何实现的 github地址 https

  • React 组件通讯

    目录 1 组件通讯 概念 1 组件的特点 2 知道组件通讯意义 总结 2 组件通讯 props 基本使用 1 传递数据和接收数据的过程 2 函数组件使用 props 3 类组件使用 props 总结 3 组件通讯 props 注意事项 1

  • 对 React Hook的闭包陷阱的理解，有哪些解决方案？

    hooks中 奇怪 其实符合逻辑 的 闭包陷阱 的场景 同时 在许多 react hooks 的文章里 也能看到 useRef 的身影 那么为什么使用 useRef 又能摆脱 这个 闭包陷阱 搞清楚这些问题 将能较大的提升对 react h

  • styled-components 的用法

    用于给标签或组件添加样式 给标签或组件添加样式 import styled from styled components styled button 给button标签添加样式 const Button styled button back

  • Vite搭建react+ts项目

    创建一个react项目 首先需要打开终端 进行vite的引入 yarn create vite 使用react模板创建项目 yarn create vite react test template react cd react test y

  • 三、react中类组件和函数组件

    简介 本篇我们只要介绍react中类组件与函数组件两种组件的写法 两者的优缺点 同时对在我们的项目开发中该使用类组件还是函数组件进行思考分析 废话不多说进入正题 类组件 设计思路 类组件时面向对象编程的思想 在其中我们去设计类组件时使用st

  • 三分钟实现一个react-router-dom5.0的路由拦截（导航守卫）

    不同于vue 通过在路由里设置meta元字符实现路由拦截 在使用 Vue 框架提供了路由守卫功能 用来在进入某个路有前进行一些校验工作 如果校验失败 就跳转到 404 或者登陆页面 比如 Vue 中的 beforeEnter 函数 rout

  • 【react】新旧生命周期对比

    componentWillUpdate componentWillReceiveProps componentWillMount 上述这三个生命周期在V18以上的版本中 使用时要加上UNSELF name

  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su

  • React（一）：React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea

  • React之state、hooks性能分析

    目录 一 state 1 为什么使用setState 2 setState异步更新 3 如何获取异步的结果 4 setState一定是异步吗 5 源码分析 6 数据的合并 7 多个state的合并 二 为什么需要Hook 三 Class组件

  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu

  • react 父组件调用子组件的方法

    子组件中 const child forwardRef props ref gt useImperativeHandle ref gt 这里面的方法是暴露给父组件的 test console log 我是组件里的test方法 test2 t

  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h

  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参

  • 如何提高React组件的渲染效率的？在React中如何避免不必要的render？

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

热门标签