ReactJS：如何将子组件传递给它的祖先？

Posted 2023-02-23

【中文标题】ReactJS：如何将子组件传递给它的祖先？

【英文标题】：ReactJS : how can I pass a child component to its ancestor?

【发布时间】：2021-01-23 00:25:01

【问题描述】：

我正在开发一个音乐应用程序，但我对 ReactJS 还是很陌生。

组件的结构如下所示：

- Playlist
-- Player
-- Tracklist
--- Track
--- Track
--- Track

我想在我的播放列表组件中有一个 currentTrack 状态，它的值将是对已单击的 Track 组件的引用（不仅仅是来自该轨道的一些数据）。

因为我需要能够从 Playlist 组件中访问 Track 的方法：例如，当 Track 将被定义为 Playlist 中的当前曲目时，我可能需要卸载旧曲目。因此，我需要在设置新轨道之前更新旧轨道的状态。

我的组件使用 React 钩子，它们不是类。

如何在单击后将我的 Track 组件的引用传递给 Playlist 组件？

谢谢！

【问题讨论】：

如果你的组件不是类，able to access the Track's method 是什么意思？如果可能的话，提供一些代码让你的问题更容易理解

你是对的。我只需要更新它的状态。

【参考方案1】：

您可以使用 props 传递事件（假设 React redux 不适合您）。

基于 cmets 的更新：

// List of songs in playlist
const defaultSongs = [
    'name': 'Cornerstone', 'artist': 'Arctic Monkeys',
    'name': 'Heart In a Cage', 'artist': 'The Strokes',
    'name': 'Backseat Freestyle', 'artist': 'Kendric Lamar'
]

const PlayList = () => 
    const [songs, setSongs] = useState(defaultSongs);
    
    //Create active song state here.
    const [activeSong, setActiveSong] = useState(null);
    
    const updateActiveSong = (track) => 
     setActiveSong(track);
    ;

    return (
        <>
            <Player activeSong=activeSong/>
            <TrackList activeSong = activeSong songs=songs updateActiveSong=updateActiveSong/>
        </>
    )


const TrackList = (songs, updateActiveSong) => 
    return (
        songs.map( song_information => 
            <Track 
                key=song_information.name
                updateActiveSong=updateActiveSong
                activeSong = activeSong
                ...song_information
            />
        )
    )


const Track = (props) => 
    // NO STATE STORED HERE
    return (
        <>
            <div> props.name </div>
            <div> props.artist </div>
            <div> Is song active: props.activeSong == props.name ? 'YES' : 'NO' </div>
            // Onclick, update the song state in the parent component
            <button onClick = () => props.updateActiveSong(props.name)> 
                Play Me
            </button>
        </>
    )

【讨论】：

如果我遗漏了什么，请告诉我。

好吧，你只是传递了歌曲名称；虽然我认为我需要传递整个组件（例如，这样我才能更新它的状态）。

Redux 可能是一种选择，但有人告诉我在学习 React 时应该避免使用它，+ 很多人在不必要的时候使用它。但也许我应该？

嗯...你能澄清一下吗：while I would need, I think, to pass the whole component。为什么需要传递整个组件？基本上，什么信息需要从孩子传达给父母？如果您尝试从父组件中设置子组件的状态（但状态存储在子组件中），那么这会破坏 React 的单向数据流策略。

是的，那是我想做的 :) 但我是 ReactJS 的新手，还不知道整个逻辑，所以你说的对我有帮助。但是我应该处理这个吗？假设当单击/播放曲目时，其“活动”状态变为 True。如果播放新曲目，则旧曲目的“活动”状态应为 False。你明白我的意思吗？或者也许我需要一个完全不同的逻辑，但我不明白是什么。

【参考方案2】：

在阅读了这篇文章后，我设法使用上下文 API 实现了我想要的：How to Replace Redux with React Hooks and the Context API。

我的播放列表现在有了一个“全局状态”，我可以在任何子组件中使用它。 太好了！