我可以将组件状态传递给HoC吗? [英] Can i pass component state to HoC?

问题描述

有什么方法可以将数据从组件状态发送到HoC?

Is there any way to send data from the component's state to HoC?

我的组件

import React, { Component } from 'react';
import withHandleError from './withHandleError';

class SendScreen extends Component {

  contructor() {
    super();
    this.state = {
      error: true
    }
  }

  render() {
    return (
    <div> Test </div>
    )
  }
};


export default withHandleError(SendScreen)

我的HoC组件:

import React, { Component } from 'react';
import { ErrorScreen } from '../../ErrorScreen';
import { View } from 'react-native';

export default Cmp => {
  return class extends Component {
    render() {
      const { ...rest } = this.props;
      console.log(this.state.error)  //// Cannot read property 'error' of null
      if (error) {
        return <ErrorScreen />
      }

      return <Cmp { ...rest } />
    }
  }
}

有没有办法做到这一点?

Is there any way to do this?

唯一的选择是提供必须从外部进入SendScreen组件的道具吗?

Is the only option is to provide props that must come to the SendScreen component from outside??

推荐答案

我知道我回答晚了，但是我的回答可以帮助其他人

I know I answer late, but my answer can help other people

这很容易做到.

1. WrappedComponent

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import HocComponent from './HocComponent';

const propTypes = {
  passToHOC: PropTypes.func,
};

class WrappedComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: true,
    };
  }

  componentDidMount() {
    const {passToHOC} = this.props;
    const {error} = this.state;
    passToHOC(error); // <---  pass the <<error>> to the HOC component
  }

  render() {
    return <div> Test </div>;
  }
}

WrappedComponent.propTypes = propTypes;
export default HocComponent(WrappedComponent);

1. HOC组件

import React, {Component} from 'react';

export default WrappedComponent => {
  return class extends Component {
    constructor() {
      super();
      this.state = {
        error: false,
      };
    }
    doAnything = error => {
      console.log(error); //<-- <<error === true>> from child component
      this.setState({error});
    };
    render() {
      const {error} = this.state;
      if (error) {
        return <div> ***error*** passed successfully</div>;
      }

      return <WrappedComponent {...this.props} passToHOC={this.doAnything} />;
    }
  };
};

反应文档:https://reactjs.org/docs/lifting-state- up.html

这篇关于我可以将组件状态传递给HoC吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！