代码之家 › 专栏 › 技术社区 › OriEng

在react中将动态值传递给hoc

high-order-component reactjs

2

OriEng · 技术社区 · 6 年前

我写了一些hoc,我需要传递给这个hoc一个动态对象,我在某个生命周期级别上创建的,我没有把他作为一个道具。如果我尝试传递一些静态值(例如,从一开始初始化myobj),它会按预期工作,并得到正确的值。

假设这是我的组件类:

 let myObj = {};

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

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

这是我的任务:

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

     } 
     return Hoc;
 }

在“test”类上创建的“dynamic”对象在hoc类上始终为空。当我试图直接从我的道具传递一些值时,也会发生这种情况,在这种情况下,页面被卡住(控制台中没有错误)。

有人知道怎么解决吗?谢谢!

0 回复 | 直到 6 年前

1

0

Prithwee Das 6 年前

您正在将空对象传递给 withHOC 功能

let myObj = {}; // <- your myObj is empty

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

         render() {
            myObj = {test:'test'}; // <- You're doing this in the render method of your Test component, so until the component is rendered myObj is empty
            return ( ... )
        }       
    }
   export default withHOC(Test, myObj);

2

0

Edan Chetrit 6 年前

关于这里发生的事情的一些解释,按顺序排列:

import Comp from '.../Test.js'
这个 withHOC 函数被触发,参数为 Test (定义见上文)和 myObj (在调用上方定义,但为空)
返回测试组件,没有人使用 myObj = {test:'test'}

建议的解决方案: 使hoc使用另一个hoc从道具获取逻辑:

const withProps = newProps => BaseComponent => props => {
  const propsToAdd = typeof newProps === 'function' ? newProps(props) : newProps
  return <BaseComponent {...props} {...propsToAdd} />
}

用途:

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

         render() {
            return ( ... )
        }       
    }
export default withProps({test:'test'})(withHOC(Test));
// or: export default withProps(props => {test:'test'})(withHOC(Test));

const withHOC = (Component) => {
    class Hoc extends React.Component
    {
        constructor(props)
        {
            super(props);
            const s = this.props.test;
            ...
        }

     } 
     return Hoc;
 }

你可以使用 recompose ,一个具有许多HOC和实用程序的库,并且为了更好的可读性:

import { compose, withProps } from "recompose"

class Test extends React.Component {...}

const enhance = compose(
  withProps({test:'test'}),
  withHOC
)
export default enhance(Test);