從父組件 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)} />