Javascript 删除react中的子组件

首先，这个web应用程序是我第一个使用react的web应用程序之一，我使用JavaScript和C#net内核完成了它

我想做的是，点击一个按钮，我想创建一个出现在屏幕上的组件。 到目前为止，这一部分运作良好

import FusePageSimple from '@fuse/core/FusePageSimple';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React, {ParentComponent, useEffect, useRef,useState } from 'react';
import { useDispatch } from 'react-redux';
import LeftSideBar from './components/SideBarComp';
import RightSideComp from './components/RightSideComp';
import Hidden from '@material-ui/core/Hidden';
import Icon from '@material-ui/core/Icon';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import { tokensToRegExp } from 'path-to-regexp';

const useStyles = makeStyles(theme => ({
    layoutRoot: {}
}));

function Dashboard(props) {
const [compCount, setCompCount] = useState(0);
const [component, setComponent] = useState('');

const eventhandler = data => {
    if(data.eliminar === 1){
    setComponent(component.filter((item) => item.props.RowNum !== data.RowNum));
    }
};

const classes = useStyles(props);
const pageLayout = useRef(null);


const onAddChild = () => {
    setCompCount(compCount + 1);    
}
useEffect(() => {
    const compArry = [...component];
    if(compCount > 0 ){
        compArry.push(<RightSideComp key={compCount} RowNum={compCount} onChange={eventhandler}/>)
    }
    setComponent(compArry);
}, [compCount]);

return (
    <FusePageSimple
        classes={{
            root: classes.layoutRoot
        }}
        header={
            <div className="flex flex-col flex-1">
                <div className="flex items-center p-24 px-12">
                    <Hidden lgUp>
                        <IconButton
                            onClick={ev => pageLayout.current.toggleLeftSidebar()}
                            aria-label="open left sidebar"
                        >
                            <Icon>menu</Icon>
                        </IconButton>
                    </Hidden>
                    <div className="flex-1 lg:px-12">
                        <h4>Header</h4>
                    </div>
                </div>
            </div>
        }
        contentToolbar={
            <div className="px-24">
                <h4>Content Toolbar</h4>
            </div>
        }
        content={
            <div className="p-24">
                <h4>Content</h4>
                <br />
                {component}
            </div>
        }
        leftSidebarHeader={
            <div className="p-24">
                <h4>Sidebar Header</h4>
            </div>
        }
        leftSidebarContent={
            <div className="p-24">
                <Button variant="contained" color="primary"
                onClick={ev => onAddChild()}>
                    Novo
                </Button>
                {/* <Button variant="contained" color="primary">Copiar</Button> */}
                <br />
                <LeftSideBar />
            </div>
        }
        innerScroll
        ref={pageLayout}
    />
);
}

export default Dashboard;

从'@fuse/core/FusePageSimple'导入FusePageSimple'；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Typography”导入排版；
从'React'导入React，{ParentComponent，useffect，useRef，useState}；
从'react redux'导入{useDispatch}；
从“/components/SideBarComp”导入左侧边栏；
从“./components/RightSideComp”导入RightSideComp；
从“@material ui/core/Hidden”导入隐藏项；
从“@material ui/core/Icon”导入图标；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/IconButton”导入IconButton；
从'path to regexp'导入{tokensToRegExp}；
const useStyles=makeStyles（主题=>({
layoutRoot:{}
}));
功能仪表板（道具）{
const[compCount，setCompCount]=useState（0）；
const[component，setComponent]=useState（“”）；
const eventhandler=data=>{
如果（data.eliminar==1）{
setComponent（component.filter（（item）=>item.props.RowNum！==data.RowNum））；
}
};
常量类=使用样式（道具）；
const pageLayout=useRef（null）；
const onAddChild=（）=>{
setCompCount（compCount+1）；
}
useffect（（）=>{
常量比较=[…组件]；
如果（compCount>0）{
compary.push（）
}
设置组件（比较）；
}，[compCount]）；
返回(
菜单
标题
}
内容工具栏={
内容工具栏
}
内容={
内容


{component}
}
左侧边栏标题={
边栏标题
}
左侧边栏内容={
onAddChild（）}>
诺沃
{/*Copiar*/}


}
内卷轴
ref={pageLayout}
/>
);
}
导出默认仪表板；

这是家长的代码。 因此，通过单击按钮“Novo”（英语中的意思是“New”），我调用onAddChild（），将其添加到compCount中，然后使用useffect添加子组件。我将2个道具传递给该子级RowNum、我正在创建的组件数量以及状态更改时触发的事件

import React,{ useEffect, useState } from 'react';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles(theme => ({
root: {
    '& .MuiTextField-root': {
        margin: theme.spacing(2),
        width: '25ch'
    }
}
}));
function RightSideComp(props) {
const classes = useStyles();
const [component, setComponent] = useState({
    dataInicio: (!(props.datastate)  ? '' : props.datastate.dataInicio),
    dataFim: (!(props.datastate)  ? '' : props.datastate.dataFim),
    descricao: (!(props.datastate) ? '' : props.datastate.descricao),
    RowNum: props.RowNum,
    eliminar: 0,
    copiar: 0
});

console.log(component);
const handleChangeInput = event => {
    const { name, value } = event.target;
    setComponent(prevState => ({
        ...prevState,
        [name]: value
    }));
};
const handleChangeButtonCopiar = event => {
    setComponent(preState => ({ ...preState, copiar: 1 }));
};
const handleChangeButtonEliminar = event => {
    setComponent(preState => ({ ...preState, eliminar: 1 }));
};
useEffect(() => {
    props.onChange(component);
}, [component]);






return (
    <div>
        <div className={classes.root}>
            <TextField
                id="dataInicio"
                label="Data Inicio"
                name="dataInicio"
                type="datetime-local"
                className={classes.textField}
                value={component.dataInicio}
                onChange={ev => handleChangeInput(ev)}
                InputLabelProps={{
                    shrink: true
                }}
            />
            <TextField
                id="dataFim"
                name="dataFim"
                label="Data do Fim"
                type="datetime-local"
                className={classes.textField}
                value={component.dataFim}
                onChange={ev => handleChangeInput(ev)}
                InputLabelProps={{
                    shrink: true
                }}
            />
            <TextField
                id="outlined-multiline-flexible"
                label="Multiline"
                name="descricao"
                multiline
                rowsMax={5}
                value={component.descricao}
                onChange={ev => handleChangeInput(ev)}
                variant="outlined"
            />
            <div>
                <Button variant="contained" color="primary" onClick={ev => handleChangeButtonCopiar(ev)}>
                    Copiar
                </Button>
                <Button variant="contained" color="secondary" onClick={ev => handleChangeButtonEliminar(ev)}>
                    Eliminar
                </Button>
            </div>
        </div>
        <Divider />
    </div>
);
}

export default React.memo(RightSideComp);

import React，{useffect，useState}来自“React”；
从'@reduxjs/toolkit'导入{createSlice，createAsyncThunk}；
从“@material ui/core/TextField”导入TextField；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Divider”导入分隔器；
const useStyles=makeStyles（主题=>({
根目录：{
“&.MuiTextField根”：{
边距：主题。间距（2），
宽度：25厘米
}
}
}));
功能RightSideComp（道具）{
const classes=useStyles（）；
const[component，setComponent]=useState({
dataInicio:（！（props.datastate）？“”：props.datastate.dataInicio），
dataFim:（！（props.datastate）？“”：props.datastate.dataFim），
descripcao:（！（props.datastate）？“”：props.datastate.descripcao），
RowNum:props.RowNum，
eliminar:0，
复印机：0
});
控制台日志（组件）；
const handleChangeInput=事件=>{
常量{name，value}=event.target；
setComponent（prevState=>({
…国家，
[名称]：值
}));
};
const handleChangeButtonCopiar=事件=>{
setComponent（preState=>（{…preState，copiar:1}））；
};
const handleChangeButtonEliminar=事件=>{
setComponent（preState=>（{…preState，eliminar:1}））；
};
useffect（（）=>{
道具更换（组件）；
}，[组成部分]；
返回(
handleChangeInput（ev）}
输入道具={{
心理医生：是的
}}
/>
handleChangeInput（ev）}
输入道具={{
心理医生：是的
}}
/>
handleChangeInput（ev）}
variant=“概述”
/>
HandleChangeButtonCopaiar（ev）}>
副驾驶
handleChangeButtonEliminar（ev）}>
Eliminar
);
}
导出默认反应备忘录（RightSideComp）；

这就是我的孩子。 因此，我的错误是当我更改eliminar（英语中的“delete”）时，该组件被删除。对于我的代码，如果它是最后一行，它会很好地删除，但是如果它是中间的一行，它会删除该行以及我单击的那一行下面的所有其他行。我试过用slice，但效果不太好。我错过了什么，但是什么

---

谢谢您的时间

我想您需要使用“useRef”

const refsList = React.useRef([]);

然后当你创造一些东西的时候

 compArry.push(<RightSideComp ref={refsList[compCount]} key={compCount} RowNum={compCount} onChange={eventhandler}/>)

---

所以byt使用“UseRef”可以访问组件本身？我无法访问它，数组始终为0，我需要填充它吗？

refsList[0].current.remove()