Любой способ рендеринга динамически добавленного модального из API с маршрутизацией в реагировать? - PullRequest
Новая
       17

Любой способ рендеринга динамически добавленного модального из API с маршрутизацией в реагировать?

0 голосов
/ 20 ноября 2019

работает над проектом для больницы, в которой данные о пациентах получает вытаскивали из апи и которая загружается в качестве карты на странице (обеспечит скриншоты). Когда вы нажимаете на карточку, дополнительная информация о пациенте отображается как модальная. Цель здесь состоит в том, чтобы они отображали, когда кто-то ищет их, основываясь на слаге. Каждая конечная точка из УПУ слизняка: Данные API

1004 *, например, если вы идете на локальный: 3000 / WebersWarriors (локальный: 3000 / $ {shirt.slug}) будет оказывать чтоконкретные модальный и если вы нажмете на карте было бы добавить «WebersWarriors» в конец URL. Любая помощь или предложения будут высоко оценены, спасибо! Макет

При нажатии на карту

Модальный код отображается динамически: 



    const TshirtItem = props => {
      const classes = useStyles();
      const { shirt } = props;
      const theme = useTheme();
      const [open, setOpen] = React.useState(false);
      const matches = useMediaQuery(theme.breakpoints.down('sm'));

      const handleClickOpen = () => {
        setOpen(true);

        setTimeout(() => {
          handleClose();
        }, 30000);
      };

      const handleClose = () => {
        setOpen(false);
      };

      const handleDetail = content => (
        <Dialog
          fullScreen={matches}
          className={classes.dialog}
          open={open}
          TransitionComponent={Transition}
          keepMounted
          onClose={handleClose}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          <DialogContent>
            <Grid container>
              <Grid item>
                {shirt.ar_lens_card !== null ? (
                  <img
                    key={shirt.ar_lens_card.id}
                    src={shirt.ar_lens_card.url}
                    title={shirt.ar_lens_card.name}
                    alt={shirt.ar_lens_card.name}
                    className={classes.dialog_img}
                  />
                ) : null}
              </Grid>

              <Grid item container>
                <Grid item xs={2} container direction="column">
                  <Typography
                    className={classes.tshirt_number}
                    color="textSecondary"
                  >
                    #{shirt.Tshirt_Number}
                  </Typography>
                </Grid>
                <Grid item xs={10} container>
                  <Grid item xs>
                    <Typography className={classes.label}>Team</Typography>
                    <Typography className={classes.team_name}>
                      {shirt.team_name}
                    </Typography>

                    <hr className={classes.hr} />

                    <Typography className={classes.patient_name}>
                      {shirt.patient_first_name}
                    </Typography>
                    <Typography
                      color="textSecondary"
                      className={classes.patient_diagnosis}
                    >
                      {shirt.patient_diagnosis}
                    </Typography>
                    <Typography className={classes.patient_bio}>
                      {shirt.patient_bio}
                    </Typography>
                  </Grid>
                </Grid>
                {matches ? (
                  <IconButton
                    edge="start"
                    color="inherit"
                    onClick={handleClose}
                    aria-label="close"
                    className={classes.arrowback_icon}
                  >
                    <ArrowBackIosIcon fontSize="large" />
                  </IconButton>
                ) : null}
              </Grid>
            </Grid>
          </DialogContent>
        </Dialog>
      );

1 Ответ

0 голосов
/ 22 ноября 2019

Ваш код будет очень похож на Реагировать-маршрутизатор галерея пример .

1004 * Вам просто нужно получить данные в список вашего компонента и сделать карты. В демонстрации ниже я использовал Bulma для стиля и React-masonry-css для создания сетки Masonry.

Демо можно найти здесь .

Важной частью демонстрации является компонент Cards со следующим кодом: 

const Cards = () => {
  const [users, setUsers] = useState([]);
  const [isFetching, setFetchStatus] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const { data } = await axios.get(API_URL);
        setUsers(data);
      } catch (err) {
        console.error("failed", err);
      }

      setFetchStatus(false);
    };

    fetchUsers();
  }, []);

  const location = useLocation();
  const background = location.state && location.state.background;

  return isFetching ? (
    "loading..."
  ) : (
    <Fragment>
      <Switch location={background || location}>
        <Route path="/" component={() => <Home users={users} />} />
      </Switch>

      {background && (
        <Route
          path="/user/:id"
          component={() => <RouterModal users={users} />}
        />
      )}
    </Fragment>
  );
};

Это похоже на пример галереи, за исключением useEffect, который выбирает данные из https://jsonplaceholder.typicode.com/ API.

useEffect перехват с пустым массивом в качестве параметра в компоненте класса основан на методе жизненного цикла componentDidMount - поэтому он просто вызывается при первом рендеринге.

Вещи, которые вы могли бы улучшить в своем окончательном приложении:

  • Проверка кэширования извлеченных данных
  • Ограничение отображаемых карт (например, показать только 1000 карт и фильтрпо буквам)
  • Добавить поле поиска с помощью typeahead
  • Изменить запрос на slug (в демоверсии это идентификатор, потому что в поддельных данных API нет слага)
  • Moveкомпоненты в разные файлы (хранятся все в одном файле только для демонстрации)
...