有什么方法可以在 react 中使用路由从 api 渲染动态添加的模态?

Question

为一家医院开发一个项目，其中患者的数据从他们的API中提取并作为卡片加载到页面上(将提供屏幕截图(。当您单击卡片时，患者的更多信息将作为模态拉出。这里的目标是让它们在有人基于 slug 搜索它时呈现。来自 API 的每个终端节点都有一个 slug：API 数据

例如，如果您转到localhost：3000/WebersWarriors(localhost：3000/${shirt.slug}(，它将呈现该特定模态，如果您单击卡片，它将在URL末尾附加"WebersWarriors"。任何帮助或建议将不胜感激，谢谢！ 布局

当卡片被点击时

动态显示的模态代码：

    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>
      );

Answer 1

你的代码将与 React-router gallery 示例非常相似。

您只需要在列表组件中获取数据并渲染卡片。在下面的演示中，我使用了 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>
  );
};

这与库示例中类似，除了从 API 获取数据的useEffect https://jsonplaceholder.typicode.com/。

useEffect将空数组作为参数的钩子位于生命周期方法componentDidMount的基于类的组件中 - 因此它只是在第一次渲染时调用。

您可以在最终应用中改进的内容：

• 检查获取数据的缓存
• 限制渲染的卡片(例如，仅显示 1000 张卡片并按字母过滤(
• 使用预先输入添加搜索字段
• 将查询更改为 slug(在演示中它是 id，因为假 api 数据中没有 slug(
• 将组件移动到不同的文件中(将所有内容保存在一个文件中，仅用于演示(