Question

我只是想让我的组件响应按需加载，并且需要确保。对于这种情况，我使用高阶组件，如下所示：

import React from 'react';

export default class AsyncCp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {component: null};
    }
    componentDidMount() {
        require.ensure([], (require) => {
            const Component = require('./cp').default;
            this.setState({
                component: Component
            });
        });
    }

    render() {
        if (this.state.component) {
            return <this.state.component />
        }
        return (<div>loading</div>);
    }

}

只要我不必在由require加载的组件中使用this.props，它的工作正常。因此，如果组件（前面代码中的'./cp'）看起来很简单：

export default class Cp extends React.Component {

    render() {
        return(
            <div>
                test
            </div>
        )
    }
}

它加载，但当我试图在这个组件中使用this.props时，我得到'{}'空对象，当然。所以，问题是 - 如何将高阶组件（AsyncCp）中的道具传递给我的Cp组件？

提前谢谢。

Answer 1

你们大多都想到了这一点，

在AsyncCp

的渲染方法中

render() {
    if (this.state.component) {
        return <this.state.component test={'works'} />
    }
    return (<div>loading</div>);
}

然后在Cp组件中，您可以像这样使用道具：

export default class Cp extends React.Component {

    render() {
        return(
            <div>
                {this.props.test}
            </div>
        )
    }
}

Answer 2

所以，问题是愚蠢的，我是一个愚蠢的延迟。我只能传递这样的道具：

<this.state.component test="test" {...this.props}/>

反应require.ensure。无法读取由require加载的组件的道具

2 个答案: