Как получить обернутый экземпляр компонента с помощью перекомпоновки?

Я использую lifecycle для создания Заказной компонент. Мне нужен доступ к обернутому экземпляру компонента. Как я могу это получить?

e.g.

export default function ajaxLoader(options) {
    return lifecycle({
        componentWillMount() {
            // how to get *wrapped* component instance here?
            // `this` refers to an instance of the lifecycle HOC, not the wrapped component
            // i.e., I want the instance of `SomeComponent`
        }
    }) // this returns a function that accepts a component *class*
}

И использование, если вы тоже хотите это увидеть:

class SomeComponent extends React.PureComponent {

    render() {
        return <span/>;
    }
}

const WrappedComponent = ajaxLoader({
    // options
})(SomeComponent);

Я думаю, что мог бы получить ссылку на обернутый компонент, если бы переопределил метод render() в моем HOC и визуализировал обернутый компонент с помощью ref=..., но recompose специально не позволяет мне реализовать метод render самостоятельно. .

Он поддерживает весь API компонентов, за исключением метода render(), который реализован по умолчанию (и переопределяется, если указан; ошибка будет зарегистрирована в консоли).


reactjs recompose
person mpen    schedule 19.07.2017    source источник
comment
Вы не можете получить упакованный компонент в lifecycle. Что вы хотите сделать с обернутым компонентом? Я не понимаю идею из вашего примера использования.   -  person wuct    schedule 19.07.2017
comment
Пример @wuct предназначен не для демонстрации варианта использования, а только для демонстрации структуры. Предположим, я хочу вызвать пользовательский метод для обернутого экземпляра, как мне это сделать?   -  person mpen    schedule 19.07.2017
comment
нет возможности получить доступ к упакованным компонентам или экземплярам в lifecycle. Вероятно, вам следует перенести эти методы на компонент более высокого порядка или просто использовать простой React.Component.   -  person wuct    schedule 20.07.2017

Ответы (1)


arrow_upward
3
arrow_downward

Если вам нужен доступ к методам экземпляра, вы можете сделать что-то вроде этого:

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childController = null;
  }

  // access child method via this.childController.instanceMethod

  render() {
    return <DecoratedChildComponent provideController={controller => this.childController = controller} />
  }
}

class ChildComponent extends Component {
  componentDidMount() {
    this.props.provideController({
      instanceMethod: this.instanceMethod,
    })
  }

  componentWillUnmount() {
    this.props.provideController(null);
  }

  instanceMethod = () => {
    console.log("I'm the instance method");
  }
}

Это немного запутанно, и в большинстве случаев его можно избежать, но если вам действительно нужен доступ к методу экземпляра, это сработает.

person thedude    schedule 14.08.2017
comment
Эта работа. после стольких поисков это было лучшим решением спасибо друг - person Vesper; 30.07.2018