0

正在为一家医院开展一个项目，在该项目中，患者的数据从他们的 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>
      );
4

1 回答 1

0

您的代码将与React-router 库示例非常相似。

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

除了从https://jsonplaceholder.typicode.com/ APIuseEffect获取数据之外，它就像在画廊示例中一样。

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

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

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