我可以将组件状态传递给HOC吗?

Question

是否有任何方法可以将数据从组件的状态发送到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)

我的事件组件：

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 } />
    }
  }
}

有什么办法做到这一点吗？

是唯一的选择是提供必须从外部到sendscreen组件的道具？

Answer 1

父母不知道孩子的状态。虽然它可以获得一个带有参考和访问state的孩子的实例，但它无法在状态更新上观看，但需要执行此操作。

这就是提升国家的情况。需要通知父母有错误：

export default Cmp => {
  return class extends Component {
    this.state = {
      error: false
    }
    onError() = () => this.setState({ error: true });
    render() {
      if (error) {
        return <ErrorScreen />
      }
      return <Cmp onError={this.onError} { ...this.props } />
    }
  }
}

Answer 2

export default withHandleError(data)(SendScreen)

in data 您可以将要传递的值发送到HOC，并且可以访问为Prop。

Answer 3

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

这很容易做。

1. 包装COMPONENT

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);

2. 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} />;
    }
  };
};

react docs：https：//reactjs.org/docs/lifting-state-up.html

Answer 4

import React, { Component } from 'react';
import withHandleError from './withHandleError';
class SendScreen extends Component {
  contructor() {
    super();
    this.state = {
      error: true
    }
  }
  render() {
    return (
    <div state={...this.state}> Test </div>
    )
  }
};

export default withHandleError(SendScreen)

您可以将状态作为组件中的道具传递。