高阶组件未通过道具

Question

我有以下HOC：

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

及其要呈现的组件：

class Banner extends Component {

    constructor(props) {
        super(props);
...
...
}
}

使用日志记录，我发现HOC中存在的道具没有传递给子组件。 （如果我在console.log的子组件的构造函数中执行props，它将只是{}，而在HOC中，我会得到正确的结果）

通常只有在刷新页面后，当我进入浏览器的子页面时，这种情况才会发生。

为什么会发生？

Answer 1

好的，我只需要在子组件代码中添加以下内容：（我猜父组件的道具只有在渲染完成后才会下降）

    componentWillReceiveProps(nextProps) {
        if (this.props !== nextProps) {
            this.setState(nextProps)
        }
    }

Answer 2

您应该使用的组件生命周期方法很可能是componentDidMount()-但是，如果没有完整的代码，很难确定这一点。

此外，如果您的JS构建链支持类字段建议，而您所做的只是设置组件的初始状态-see here for more info，则可以省略构造函数。同样，如果没有完整的代码，很难确定。您的某些构造函数逻辑可能应移至componentDidMount()。

如果问题仅在刷新后发生，则可能与逻辑在第一次安装组件时运行有关，而不仅仅是在组件的属性更新时运行。