node.js - 遍历数组并一次显示一个 React 组件

问题描述

我有以下页面：

const GalleryPage: NextPage = () => {
  const router = useRouter();
  const id = router.query.id as string;

  return (
    <Gallery id={id} imageUrl="someRandomImageUrl.png" />
  );
};

在画廊组件中，我有

...
return (
    <div>
      <Form
        onSubmit={handleSubmit}
        name="judging"
      >
        <input type="hidden" name="form-name" value="judging" />

        <Container text style={{ marginTop: '2em' }} textAlign="center">
          <Image src={galleryProps?.imageUrl} size="medium" verticalAlign="middle" />
          <Table singleLine>
            <Table.Header>
              <TableHeader />
            </Table.Header>

            <Table.Body>
              <TableRow
                title="Composition"
                name="composition"
                item={composition}
                setItem={setComposition}
              />
              <TableRow
                title="Creativity - Originality"
                name="creativity"
                item={creativity}
                setItem={setCreativity}
              />
              <TableRow
                title="Neatness - Finishing details"
                name="neatness"
                item={neatness}
                setItem={setNeatness}
              />
            </Table.Body>
          </Table>
        </Container>
        <Container text style={{ marginTop: '1em' }} textAlign="center">
          <p>
            <Button type="submit">Submit</Button>
          </p>
        </Container>
      </Form>
    </div>
  );

自定义组件的位置TableRow和位置。TableHeader

我似乎无法实现的事情

我有一组图像 URL：

const imageUrls = ['firstImageUrl.png', 'secondImageUrl.jpeg', 'thirdImageUrl.png']

对于中的每个项目imageUrls，我想显示该Gallery组件。并且只有在Gallery提交表单后，我才希望下一个实例显示以下图像。

即：： firstcase一旦<Gallery id={id} imageUrl="firstImageUrl.png" /> 提交表格，第二种情况 secondcase：<Gallery id={id} imageUrl="secondImageUrl.jpeg" /> 一旦提交表格，第三种情况......

标签： node.jsreactjsnext.js

node.js - 遍历数组并一次显示一个 React 组件

问题描述

解决方案

推荐阅读