Question

我的项目中有一个加载屏幕，一旦我的目标网页（包含视频）加载完毕，我希望将其淡出。我认为我可以使用video元素的onLoadedData道具来设置我的应用的状态，即appLoaded为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

在我的home组件中，我调用由 App.js

传递的loadApp函数。

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

谢谢！

Answer 1

功能组件中没有this。将首页组件更改为以下内容：

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

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

1 个答案: