Передать динамическое значение HOC в реакции - PullRequest
Новая
       22

Передать динамическое значение HOC в реакции

2 голосов
/ 14 марта 2019

Я пишу некоторый 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.Это также происходит, когда я пытаюсь передать какое-то значение из моего реквизита напрямую, в этом случае страница застряла (без ошибок в консоли).

Кто-нибудь знает, как решить эту проблему?Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Некоторое объяснение того, что здесь происходит, по порядку:

  1. import Comp from '.../Test.js'
  2. срабатывает функция withHOC с параметрами Test (которая определенанад вызовом) и myObj (который определен над вызовом, но пуст)
  3. Возвращен тестовый компонент, и никто не использовал логику 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 , библиотека, которая имеет многоhocs и utils, и для лучшей читаемости: 

import { compose, withProps } from "recompose"

class Test extends React.Component {...}

const enhance = compose(
  withProps({test:'test'}),
  withHOC
)
export default enhance(Test);
0 голосов
/ 14 марта 2019

Вы передаете пустой объект в функцию 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);
...