有什么方法可以通过反应中的路由从 api 渲染动态添加的模态吗？

Question

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

例如，如果您转到 localhost:3000/WebersWarriors (localhost:3000/${shirt.slug})，它将呈现该特定模式，如果您单击卡片，它将附加"WebersWarriors"到URL结束。任何帮助或建议将不胜感激谢谢！ Layout

When card gets clicked

正在动态显示模态代码：



    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 example.

非常相似

您只需在列表组件中获取数据并呈现卡片。在下面的演示中，我使用 Bulma 进行样式设置，并使用 React-masonry-css 创建 Masonry 网格。

可以找到演示 here。

演示的重要部分是 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 以空数组作为参数的挂钩位于基于 class 的组件生命周期方法 componentDidMount - 所以它只是在第一次渲染时调用。

您可以在最终应用中改进的地方：

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

有什么方法可以通过反应中的路由从 api 渲染动态添加的模态吗？

Any way to render a dynamically added modal from api with routing in react?

reactjs

react-routing