Я новичок в реагировании, я также использую 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.

Благодарность

-2
Tahir Iqbal 11 Апр 2019 в 10:17

2 ответа

Лучший ответ

В этом случае вам нужно знать только 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
};

Возможно, вы захотите проверить Реагировать на документы для хуков для дальнейшего использования.

0
Brian Le 11 Апр 2019 в 07:27

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

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>
        );
      }
    }
0
kk_360 19 Май 2019 в 13:58