Javascript 如何在从父组件调用映射函数时更新子组件的状态

我试图显示和隐藏子组件的菜单，可能在第n个数字

只有当我在子组件中拆分代码时，问题才会发生

用例：当我从一张卡上单击菜单时，它会显示出来；当我从另一张卡上单击时，它也会显示出来，而卡上的菜单首先保持活动状态

我真正想要的是，如果我从第一张卡点击，它应该会显示出来。类似地，如果我从第二张卡单击，它会显示并隐藏第一张卡的打开菜单。 基本上，如果我不使用菜单的子组件，它可以完美地工作，但当我开始使用子组件时，上述问题就开始了

代码： 母公司：

    import React, {Component} from "react";
    
class ChapterActions extends Component {
 constructor(props) {
   super(props);
   this.state = {
 showActions: false,
 }
 }
    
        componentDidMount() {
            const {chapterLists, chapterIndex, chapterId} = this.props;
            this.setState({chapterLists, chapterIndex, chapterId});
        }
    
        openDropdown = (event) => {
            const {showActions} = this.state;
            this.setState({showActions: showActions === event.target.id ? false : event.target.id})
        }
    
        render() {
            const {chapterLists, chapterIndex, showActions, chapterId} = this.state;
            return (
                <>
                    {chapterLists ? (
                        <>
                            <div className={'dropdown-div'} onClick={(event) => { this.openDropdown(event) }}>
                                <i className={"fa fa-ellipsis-v dropdown-icon"} id={`${chapterIndex}`} aria-hidden={"true"}/>
                            </div>
                            <div className={"dropdown-option-wrapper"} style={{display: `${chapterIndex}` === showActions ? 'block' : 'none'}}>
                                <div className={"dropdown-option"}>
                                    <span className={"select-name"}>
                                        <a onClick={() => {this.props.deleteExistingChapterAction(chapterId)}} data-confirm={"Möchten Sie den Kurs wirklich löschen?"}>
                                        <i className={"fas fa-trash"} aria-hidden={"true"}/><span className={"delete-span"}>Löschen</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </>
                    ) : (
                        ""
                    )}
                </>
            )
        }
    }
    
    export default ChapterActions;

{章和章.图（（章，索引）=>
{this.getChapterDetailAction（chapter.course\u id，chapter.id）}>
4卡皮特尔酒店
)}

子组件（章节）：

    import React, {Component} from "react";
    
class ChapterActions extends Component {
 constructor(props) {
   super(props);
   this.state = {
 showActions: false,
 }
 }
    
        componentDidMount() {
            const {chapterLists, chapterIndex, chapterId} = this.props;
            this.setState({chapterLists, chapterIndex, chapterId});
        }
    
        openDropdown = (event) => {
            const {showActions} = this.state;
            this.setState({showActions: showActions === event.target.id ? false : event.target.id})
        }
    
        render() {
            const {chapterLists, chapterIndex, showActions, chapterId} = this.state;
            return (
                <>
                    {chapterLists ? (
                        <>
                            <div className={'dropdown-div'} onClick={(event) => { this.openDropdown(event) }}>
                                <i className={"fa fa-ellipsis-v dropdown-icon"} id={`${chapterIndex}`} aria-hidden={"true"}/>
                            </div>
                            <div className={"dropdown-option-wrapper"} style={{display: `${chapterIndex}` === showActions ? 'block' : 'none'}}>
                                <div className={"dropdown-option"}>
                                    <span className={"select-name"}>
                                        <a onClick={() => {this.props.deleteExistingChapterAction(chapterId)}} data-confirm={"Möchten Sie den Kurs wirklich löschen?"}>
                                        <i className={"fas fa-trash"} aria-hidden={"true"}/><span className={"delete-span"}>Löschen</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </>
                    ) : (
                        ""
                    )}
                </>
            )
        }
    }
    
    export default ChapterActions;

import React，{Component}来自“React”；
类ChapterActions扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
表演：假，
}
}
componentDidMount（）{
const{chapterLists，chapterndex，chapterId}=this.props；
this.setState（{chapterLists，chapternidex，chapterId}）；
}
openDropdown=（事件）=>{
const{showActions}=this.state；
this.setState（{showActions:showActions==event.target.id？false:event.target.id}）
}
render（）{
const{chapterLists，chapterndex，showActions，chapterId}=this.state；
返回(
{章节列表(
{this.openDropdown（事件）}}>
{this.props.deleteExistingChapterAction（chapterId）}数据确认={“Möchten Sie den Kurs wirklich löschen？”}>
洛申
) : (
""
)}
)
}
}
导出默认章节；

作为一个最佳实践，它说如果我们使用子组件，状态应该在子组件中管理，但在我的例子中，逻辑是错误的吗

---

或者，最好的做法是什么？

如果您只需要显示一张卡，那么这是在父组件中保持状态的最佳方法

比如说

ParentComp -> 
state: openedChapterId = someId
setOpenedChapter(id) => setState({openedChapterId: id});

因此，当您尝试渲染您的孩子时，您可以比较currentID

<ChapterActions isOpened={chapterId === openedChapterId} handleMenuClick={() => setOpenedChapter(chapterId)} />

setOpenedChapter（chapterId）}/>

不起作用。对不起，有人吗？问题仅在使用子组件时出现。