高阶组件不通过道具答案

【问题标题】：Higher order component not passing props高阶组件不通过道具
【发布时间】：2019-09-02 23:49:50
【问题描述】：

我有以下 HOC：

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

以及它正在渲染的组件：

class Banner extends Component {

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

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

这通常只发生在我在浏览器中的子页面上，刷新页面后。

为什么会这样？

【问题讨论】：

能否贴出父子组件的全部代码？
再看一下，似乎我必须使用componentWillReceiveProps...我只需要帮助了解为什么会发生这种情况以及如何正确实施它。
您是否尝试过 HOC 中的 <ComposedComponent data={...this.props} /> 和子组件中的 console.log(this.props.data) ？
是的，这正是我所做的，console.log 有时会返回{}，但就像我在回答中指出的那样，我认为这是因为子组件在道具传递给它之前已经渲染.

标签： reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

如果问题仅在刷新后发生，则可能与组件首次挂载时运行的逻辑有关，但不会仅在组件的 props 更新时运行。

【讨论】：