时间戳

首页 > 解决方案 > 在反应中将动态值传递给 HOC

reactjs - 在反应中将动态值传递给 HOC

问题描述

我写了一些 HOC，我需要将我在某个生命周期级别创建的动态对象传递给这个 HOC，但我没有将他作为道具。如果我尝试传递一些静态值（例如从开始初始化 myObj），它会按预期工作并且我得到正确的值。

假设这是我的组件类：

 let myObj = {};

  class Test extends React.Component
   {
      constructor(props) {
        super(props);
        .....
        }

         render() {
            myObj = {test:'test'};
            return ( ... )
        }       
    }
   export default withHOC(Test, myObj);

这是我的 HOC：

const withHOC = (Component, test) => {
    class Hoc extends React.Component
    {
        constructor(props)
        {
            super(props);
            const s = test; // ---->test is empty object always !!
            ...
        }

     } 
     return Hoc;
 }

我在“测试”类上创建的“动态”对象在我的 HOC 类上始终为空。当我尝试直接从我的道具传递一些值时也会发生这种情况，在这种情况下页面被卡住（控制台中没有错误）。

有人知道如何解决这个问题吗？谢谢！

标签： reactjshigh-order-component

解决方案

当您以这种方式组合组件时，组合只发生在编译时（静态组合）。这意味着 withHOC 只运行一次并且接收一个空myObj参数，因为它使用的是在声明中定义的参数。

export default withHOC(Test, myObj); //myObj = {}

如果您希望该值是动态的，withHOC则应在该值更改时运行组合。

您无法将数据从WrappedComponent(Test) 发送到HOC(withHOC)，因此即使您更改中的myObj值Test.render，HOC 也永远不会知道。

如果你真的需要的话，你能做的就是在Test.render

render(){
    const Hoc = withHOC(this.state.myObj, WrappedComponent);//WrappedComponent can be anything
    return(
        <Hoc/>
    )
}

这样，每次组件渲染时，Hoc都使用myObj组件状态中的值来组合，这不是最好的方法，因为 this.state.myObj 可能具有与前一次渲染时相同的值，并且您将使用与以前相同的数据重新组合。

更好的方法是检查 myObj at 中的更改Test.componentDidUpdate，如果确实发生了更改，则Hoc再次编写。

推荐阅读