如何從 React.js 中的數組中刪除 JSX 元素？

Question

我在 state 中有一組部分，其中包含一些 JSX 元素列表。 我試圖在單擊按鈕時從數組中刪除一個特定的 JSX 元素，但我不知道如何做到這一點。 任何幫助，將不勝感激。

Section.js

class Section extends React.Component {
    state = {
        sections: []
    };

    addLectureHandler = () => {
        const secs = this.state.sections;
        secs.push(
            <LectureItem key={Math.random} removeLectureHandler={() => this.removeLectureHandler(<LectureItem />)} />
        );
        this.setState({ sections: secs });
    };

    removeLectureHandler = (item) => {
        console.log(item);
    };

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                <h4 className={classes.sectionTitle}>
                    Section 1 - <AssignmentIcon /> Introduction
                </h4>
                <div className={classes.addButtonContainer}>
                    <Button variant="outlined" className={classes.addButton} onClick={this.addLectureHandler}>
                        Create Lecture
                    </Button>
                </div>
                <div className={classes.lectureContainer}>{this.state.sections}</div>
            </div>
        );
    }
}

export default withStyles(styles)(Section);

LectureItem.js

class LectureItem extends React.Component {
    render() {
        const { classes, removeLectureHandler } = this.props;
        return (
            <div className={classes.container}>
                <div className={classes.titleContainer}>
                    <TextField className={classes.textField} label="New Lecture Title" name="lecture" margin="normal" />
                    <Button className={classes.removeButton} onClick={removeLectureHandler}>
                        <ClearIcon />
                    </Button>
                </div>
                <Button variant="contained" color="primary" className={classes.button}>
                    Add
                </Button>
            </div>
        );
    }
}

export default withStyles(styles)(LectureItem);

Answer 1

它非常直截了當，它更像是一個邏輯陳述而不是反應，讓我給你看

對於您的方法addLectureHandler將推送命令更改為以下

 secs.push(
        <LectureItem key={Math.random} removeLectureHandler={() => this.removeLectureHandler(secs.length)} />
    );

您正在傳遞<LectureItem />這是新元素而不是您要推送的元素，因此我們將傳遞長度（該元素的實際新索引）。

接下來將您的removeLectureHandler更改為此

removeLectureHandler = (indexToDelete) => {
    console.log(indexToDelete);
    const secs = this.state.sections;
    secs.splice(indexToDelete, 1);
    this.setState({ sections: secs });

};

並且您已成功從 Sections 和 UI 中刪除了一個元素：-0