从父组件 React JS 调用 map function 时如何更新子组件的 state

Question

我正在尝试显示和隐藏可能在第 n 个子组件中的菜单。

仅当我将代码拆分为子组件时才会出现此问题。

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

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

代码：父比较：

    {chapters && chapters.map((chapter, index) =>
      <div className="card" key={chapter.id}>
       <ChapterActions
         {...this.state}
         chapterLists={true}
         chapterIndex={index}
         chapterId={chapter.id}
         deleteExistingChapterAction={this.deleteExistingChapterAction}
       />
      <div onClick={() => { this.getChapterDetailAction(chapter.course_id, chapter.id) }}>
      <div className={"subtitle"}>
          <i className="fas fa-book"/> 4 Kapitel
      </div>
     </div>
   </div>
)}

儿童比较（ChapterActions）：

    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;

作为最佳实践，如果我们使用子组件，它说 state 应该在子组件中管理，但在我的情况下，逻辑是错误的吗？

或者什么应该是最佳做法？

Answer 1

如果您只需要显示一张卡，则最好将 state 保留在父组件中。

例如

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

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

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