Мне нужна помощь в преобразовании компонента класса реакции для реагирования хуков - PullRequest
Новая
       6

Мне нужна помощь в преобразовании компонента класса реакции для реагирования хуков

0 голосов
/ 11 апреля 2019

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

0 голосов
/ 19 мая 2019

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

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 голосов
/ 11 апреля 2019

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

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

...