时间戳

首页 > 解决方案 > 反应：用另一个文件中的 json 数据填充选择菜单

json - 反应：用另一个文件中的 json 数据填充选择菜单

问题描述

所以我有一个counties.json文件，我有一个带有选择输入的文件：

<FormGroup row>
    <Label for="" sm={2}>Site County</Label>
    <Col sm={10}>
        <Input className="form-control" type="select">
            <option>Louth</option>
            <option>Dublin</option>
            <option>Louth</option>
        </Input>
    </Col>
</FormGroup>

我的目标是用 json 文件中的数据填充选择输入。我怎样才能做到这一点？

标签： jsonreactjs

解决方案

由于您要加载 json 数据，因此您会发现使用该json-loader包很有帮助。这允许您将 json 数据导入到变量中。

要将包添加到您的项目中，请执行以下操作：

npm install json-loader

添加后，假设您有一个名为 的数据文件counties.json，那么您可以执行以下操作：

import jsonData from './counties.json'

假设您的 json 数据如下所示：

{
  "counties": [
    { "value": "louth",
      "display": "Louth" },
    { "value": "dublin",
      "display": "Dublin" }
  ]
}

然后，您可以从 json 数据中获取您的县，如下所示：

const counties = jsonData.counties // This is an array

一旦你有了你的数组，你可以使用数组的map()函数将数组的每个元素（在这个例子中，是一个带有键value和的对象display）变成一个<option>. 但请确保，因为您正在呈现一组选项，所以您为每个选项提供了一个唯一的键。只需使用value就足够了。所以，render()它看起来像这样：

 <Input className="form-control" type="select">
   { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
 </Input>

这是一个代码沙箱，它演示了所有这些代码的实际作用。

希望这可以帮助！

`

推荐阅读