javascript - 我可以将组件状态传递给 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)

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

有没有办法做到这一点？

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

Answer 1

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

这很容易做到。

1. 包裹组件

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

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

Answer 2

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)

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

Answer 3

父母不知道孩子的状态。虽然它可以获取一个带有 ref 和 access 的子实例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 4

export default withHandleError(data)(SendScreen)

在数据中，您可以将要传递的值发送给 HOC，并且可以作为 prop 访问。