Reactjs 如何检测react中其他组件的切换状态何时已更改

我正在研究React中的渲染道具。我有一个小的测试项目，专门用于学习。“收藏夹”组件在“打开”状态下将心脏从空切换为满 “变化。Toggler组件处理打开状态，并使用切换功能更改/设置打开状态。我现在使用FavoriteText组件。我想让这个组件做的是，当FavoriteText组件中的状态更改为full heart时，我希望FavoriteText组件中的文本反映更改，并显示“full heart”或“empty heart”。我意识到这可以很容易地通过在收藏夹中包含文本来实现，但我再次希望获得更多关于React中渲染道具的知识

FavoriteText.js

import React, {Component} from 'react'
import Toggler from "./Toggler"

function FavoriteText(props) {
    return(
        <Toggler defaultOnValue={false} render={
            (on)=>(
                <h1>{on } ? "Full Heart": "Empty Heart"}</h1>
            )
        }/>
    )
}

export default FavoriteText

import React，{Component}来自“React”
从“/Toggler”导入切换程序
函数收藏夹文本（道具）{
返回(
(
{on}？“满心”：“空心”}
)
}/>
)
}
导出默认收藏夹文本

Toggler.js

import React, {Component} from "react"

class Toggler extends Component {
    state = {
        on: this.props.defaultOnValue
    }

    toggle = (e) => {
        this.setState(prevState => {
            return {
                on: !prevState.on
            }
        })
    }

    render() {
        return (
         <div>{this.props.render(this.state.on, this.toggle)}</div>
        )
    }
}

export default Toggler

import React，{Component}来自“React”
类切换器扩展组件{
状态={
on:this.props.defaultOnValue
}
切换=（e）=>{
this.setState（prevState=>{
返回{
on:！prevState.on
}
})
}
render（）{
返回(
{this.props.render（this.state.on，this.toggle）}
)
}
}
导出默认切换程序

Favorite.js

import React, {Component} from "react"
import Toggler from "./Toggler"

function Favorite(props) {
    return (
        <Toggler defaultOnValue={false} render={
            (on, toggle)=> (
                <div>
                    <h3>Click heart to favorite</h3>
                    <h1>
                        <span 
                            onClick={toggle}
                        >
                            {on ? "❤️" : "♡"}
                        </span>
                    </h1>
                </div>

        )} />
    ) 
}

export default Favorite

import React，{Component}来自“React”
从“/Toggler”导入切换程序
功能收藏夹（道具）{
返回(
(
单击“心”以选择收藏夹
{什么事？“❤️" : "♡"}
)} />
) 
}
导出默认收藏夹

您必须将

切换开关的状态提升到其父组件（“收藏夹”）然后将该状态作为道具传递。Toggler已经被导入到Favorite和FavoriteText组件中，但这些使用都是
Toggler
组件的两个独立实例。因此，我的建议仍然有效-将
Toggler
的状态提升到其父级（
Favorite
和
FavoriteText
）并将其作为道具传递给
Toggler
。