时间戳

首页 > 解决方案 > 在构建期间将动态下拉转换为静态 - React

reactjs - 在构建期间将动态下拉转换为静态 - React

问题描述

我的反应网站中有一个下拉选择元素，有一个 API 可以让我选择填充列表，我想在构建过程中将此动态列表转换为静态列表。此列表很少更改，因此我认为我可以节省一些 API 调用。有没有办法我可以做到这一点？

例如： 

<select>
  {data && data.map((item) => (<Option value={item}>{item}</Option>))}
</select>

构建后：

<select>
  <Option value="option 1>option 1</Option>
  <Option value="option 2>option 2</Option>
  <Option value="option 3>option 3</Option>
</select>

附言。我用 CRA

标签： reactjsselectbuildcreate-react-app

解决方案

注意：这与 CRA 无关。

您可以通过三个步骤实现此目的：

  1. 您需要编写一个 bash 脚本或节点脚本来调用（如果是 bash，则为 curl）API 并将响应保存在 JSON 文件中。
  2. 在您的代码中，您需要导入该 JSON 数据并填充选项。因此，每当更新 JSON 文件时，都会更新选项。
  3. 每次要部署时，都需要在 CRA 构建步骤之前运行此脚本。

推荐阅读