Question

所以我有一个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文件中的数据填充选择输入。我该怎么办？

Answer 1

由于要加载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>

这里是code sandbox，演示了所有正在执行的代码。

希望这会有所帮助！

`

React：用来自另一个文件的json数据填充选择菜单

1 个答案: