React作为一种流行的前端框架，提供了丰富的API和功能，使得动态添加和删除元素变得非常便捷。本文将深入探讨在React中如何实现动态添加和删除元素，并提供详细的代码示例。
在Web应用程序中，动态添加和删除元素是一项常见的任务。在React中，我们可以利用其组件化的特性和状态管理功能，轻松实现对DOM元素的动态操作。接下来，我们将分章介绍在React中动态添加和删除元素的方法，并给出相应的代码示例。
在React中，动态添加元素通常涉及到更新组件的状态。我们可以通过调用
setState
方法来更新状态，从而触发组件的重新渲染，实现动态添加元素的效果。以下是一个简单的动态添加元素的示例：
import React, { useState } from 'react';
function DynamicElementExample() {
const [elements, setElements] = useState(['Element 1', 'Element 2']);
const addElement = () => {
const newElement = `Element ${elements.length + 1}`;
setElements([...elements, newElement]);
return (
<button onClick={addElement}>Add Element</button>
{elements.map((ele
import
React
, { Component } from '
react
';
import
React
DOM from '
react
-dom';
import PropTypes from 'prop-types';
//父
组件
class App
组件
的 state 不允许直接修改，只能读。
如果 state 为数组，需要向数组push新
元素
，不能使用push()操作，而应使用concat()操作。
push() 增加新
元素
到数组末尾，返回数组新的长度，因此修改原始数组。
concat() 合并数组，不修改已有的数组，而是返回合并后的新数组，例如：
return state
.
concat(newItem);
.
.
.
很长一段时间没有使用
react
做项目了，一看官网已经更新到17
.
x版本了，记得今年上班的时候才v13
.
x，由于平时项目开发用vue的时候居多，对于
react
长时间不用怕忘了，赶紧写个小案例练练手，使用版本说明：
react
：v17
.
0
.
1
MDUI：v1
.
0
.
1
官方描述：MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用。官网地址https://www
.
mdui
.
org/
先上效果图：
至于为啥使用MDUI，我也是在头条上刷资讯的时候偶然看见的，因为平时在上面
<div className={styleSer
.
testPicConTwo}>
this
.
getInterfaceInfo
.
call(this, InterfaceInfo)
</div>
要求 getInterfaceInfo 函
.
.
.
卸载节点:
let state=
React
Dom
.
unmountComponentAtNode(挂载的dom对象) 返回是否
删除
成功bool值
删除
dom对象内的内容
代码示例:
const div = document
.
createElement('div');
document
.
body
.
appe
let h1 =
React
.
createElement('h1',null,'一生真伪有谁知');
let app = document
.
querySelector('#app');
React
DOM
.
render(
.
.
.
import
React
, { Component } from '
react
';
//import logo from '
.
/logo
.
svg';
//import '
.
/App
.
css';
class App extends Component {
//创建完
组件
APP后会自动调用 constructor()构造函数
constructor(props){
super(p
.
.
.
如果state中的数组是空数组，那么数组的push方法只能向数组
添加
一次数据，第二次就会报错this
.
state
.
xxx
.
push is not a function，使用解构才能向state中的数组
添加
元素
。
错误的方法:
state = {
xxx: []
.
.
.
.
.
.
.
.
.
this
.
setState({
xxx: this
.
xxx
.
push(要
添加
的
元素
);
正确的方法:
state = {
xxx: []
.
.
.
.
.
.
.
.
.
this
.
setState({
xxx: [
.
.
