React中子组件间如何传值？点击组件向Playlist传ID更新数组

在React中，兄弟组件（MainCard和Playlist）无法直接传值，需通过它们的共同父组件App完成中转，具体步骤如下：

1. 在App组件中管理播放列表状态 #

将播放列表的id数组状态放在App组件中，同时定义添加id的函数：

import { useState } from 'react';
// 保留原有导入内容

function App() {
  // 初始化存储播放列表id的数组
  const [playlistIds, setPlaylistIds] = useState([]);

  // 定义添加id到播放列表的函数，避免重复添加
  const addToPlaylist = (id) => {
    if (!playlistIds.includes(id)) {
      setPlaylistIds(prev => [...prev, id]);
    }
  };

  const mainCards = Data.map(card => {
    return(
      <MainCard 
          key={card.id}
          id={card.id}
          image={card.url}
          title={card.title}
          playbutton={card.playbutton}
          addbutton={card.addbutton}
          // 将添加函数传递给MainCard组件
          onAdd={addToPlaylist}
      />
    )
  })

  const sideCards = SideData.map(card => {
    return(
      <SideCard 
        image={card.sideurl}
        key={card.id}
        title={card.sidetitle}
        playbutton={card.playbutton}
        addbutton={card.addbutton}
        // 如果SideCard也需要添加功能，同样传递onAdd函数
        onAdd={addToPlaylist}
      />
    )
  })

  return (
    <div className="App">
      <Navbar />
      <Header />
      {/* 将播放列表数据传递给Playlist组件 */}
      <Playlist playlistIds={playlistIds} />
      <CardContainer />
      <div className="maincards">
          {mainCards}
      </div> 
      <div className="sidecards">
        {sideCards}
      </div>
    </div>
  )
}

export default App

2. 修改MainCard组件，调用父组件传来的添加函数 #

移除MainCard内部的handleAdd，直接调用父组件传递的onAdd函数：

function MainCard(props) {
    return(
        <div className="mainCardObject">
            <div className="cardObj">
                <img src={props.image} className ="mainCardImage"/>
                <img src={props.playbutton} className="playbutton"/>
                <img src={props.addbutton} onClick={() => props.onAdd(props.id)} className="addbutton" />
            </div>
        </div>
    )
}

export default MainCard

3. 修改Playlist组件，渲染播放列表内容 #

接收父组件传来的playlistIds，将数组内容渲染到列表中：

function Playlist(props) {
    return(
        <div className="playlistContainer">
            <ul>
                {props.playlistIds.map(id => (
                    <li key={id}>歌曲ID: {id}</li>
                ))}
            </ul>
        </div>
    )   
}

export default Playlist

补充说明 #

• 状态提升：将共享状态（播放列表数组）提升到共同父组件，是React解决兄弟组件通信的标准方案。
• 去重逻辑：addToPlaylist函数中加入了重复判断，可根据实际需求调整或移除。
• SideCard适配：如果SideCard也需要添加功能，只需给其传递onAdd函数，逻辑与MainCard一致。

内容的提问来源于stack exchange，提问作者c0nsy