我需要帮助将反应类组件转换为反应钩子答案

【问题标题】：I need help in converting react class component to react hooks我需要帮助将反应类组件转换为反应钩子
【发布时间】：2019-09-01 17:58:25
【问题描述】：

我是 react hooks 的初学者，我也在我的项目中使用 graphql。有人可以帮助将组件转换为反应钩子。

class Detail extends Component {
  static propTypes = {
    classes: PropTypes.shape(commonStyles).isRequired,
    siteId: PropTypes.string
  };
  state = {
    showDialog: false
  };
  handleRowHistory = () => {
    this.setState({ showDialog: true });
  };
  render() {
    const { showDialog } = this.state;
    const { data, classes, siteId } = this.props;
    if (data.error) {
      return <CardErrorIndicator apolloData={data} />;
    } else if (data.loading) {
      return <CardLoadingIndicator />;
    }
    const { sites } = data;
    const { controller } = _.first(sites);

    return (
      <div
        className={classNames(
          classes.overall,
          classes.basePadding,
          "site-assets-detail-page"
        )}
      >
        <SiteRowController
          controller={controller}
          onRowHistoryClick={this.handleRowHistory}
        />
        {showDialog && (
          <RowHistoryDialog
            open={showDialog}
            siteId={siteId}
            onClose={() => this.setState({ showDialog: false })}
          />
        )}
      </div>
    );
  }
}

const DetailWithData = compose(
  graphql(SITE_ASSETS_DETAIL_QUERY, {
    options: props => ({
      variables: {
        siteId: props.siteId
      },
      pollInterval: 5000
    })
  })
)(Detail);

export default withStyles(commonStyles)(DetailWithData);

我知道 React-Hooks 是 React Class 风格的替代品。问题是我是否可以重构并在其中添加 React 钩子。

谢谢

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

在这种情况下，您需要知道的唯一 2 个挂钩是 useState() 和 useCallback()（可选）。对于道具类型，您可以单独声明它们。因此，结合所有这些，您的代码应该大致如下所示：

const Detail = ({ data, classes, siteId }) => {
  const [showDialog, setShowDialog] = useState(false);
  const handleRowHistory = () => {
    setShowDialog(true);
  }; // You might need to use useCallback to stop new functions from being created

  if (data.error) {
    return <ErrorComponent />;
  }
  if (data.loading) {
    return <LoadingComponent />;
  }

  return <YourComponent />;
};

Details.propTypes = {
  // Declare your prop types here
};

您可能需要查看React docs for hooks 以供进一步参考。

【讨论】：

谢谢，这将是很大的帮助

【解决方案2】：

这可以转换成这个，但我建议为最终返回中的内容编写另一个组件，这将使您的代码更清晰。

const Detail = (props) => {
      const { data, classes, siteId } = props;
      const { sites } = data;
      const { controller } = _.first(sites);

      const [showDialog, setShowDialog] = useState(false);

      const handleRowHistory = () => {
          setShowDialog(true)
      }

      const dissmissDialog = () => {
          setShowDialog(false)
      }

      if (data.error) {
          return <CardErrorIndicator apolloData={data} />;
      } 
      if (data.loading) {
          return <CardLoadingIndicator />;
      }

      return (
          <div
            className={classNames(
              classes.overall,
              classes.basePadding,
              "site-assets-detail-page"
            )}
          >
            <SiteRowController
              controller={controller}
              onRowHistoryClick={handleRowHistory}
            />
            {showDialog && (
              <RowHistoryDialog
                open={showDialog}
                siteId={siteId}
                onClose={dissmissDialog}
              />
            )}
          </div>
        );
      }
    }

【讨论】：