Javascript 访问尚未渲染的React组件的道具

我有一个加载屏幕在我的项目，我想淡出它一旦我的登录页（它是一个视频）加载。我想我可以使用视频元素的onLoadedData属性来设置我的应用程序的状态，apploadded为true。但因为它没有渲染，我无法访问它。那么我该怎么做呢

我的代码的简化版本是：

class App extends Component {

    constructor (props) {
        super(props)
        this.state = {appLoaded: false}
    }

    loadApp = () => {this.setState({appLoaded:true});}

    render () {
        const { appLoaded } = this.state
        return (
            <div className="App">
                    {appLoaded ? 
                       (
                        <Switch>
                         <Route path='/' exact render={(props) => <Home {...props} loadApp={this.loadApp}/>}/>
                        </Switch>
                        ) 
                        : (<LoadingScreen/>
                )
      }
}

export default App

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={apploated:false}
}
loadApp=（）=>{this.setState（{apploated:true}）；}
渲染（）{
const{apploated}=this.state
返回(
{加载了吗？
(
}/>
) 
: (
)
}
}
导出默认应用程序

在我的主页组件中，我调用App.js传递的loadApp函数

const Home = (props) => {
        return (
            <div className="home-container" style={{width:"100%"}}>
                <video onLoadedData = this.props.loadApp/>
            </div>
        );
};

const Home=（道具）=>{
返回(
);
};

---

提前感谢！

功能组件中没有此

。请将Home组件更改为以下内容：

const Home=props=>{
返回(
);
};
视频在实际渲染之前不会开始加载，因此您必须选择“隐藏”在它准备好播放之前，请使用CSS进行编辑，或者您必须发出HTTP请求以获取视频的数据/blob，然后使用该信息呈现
视频
元素……而且，
加载的数据
不会真正提供您想要的-
可以播放通过
将最接近您想要使用的内容。