您可以从 data.json 导入联系人，并使用 map() 迭代和显示联系人。

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Container>
        <Grid>
          <Grid.Row>
            <Grid.Column>
              <Header>List</Header>
              <List>
                {contacts.map(el => {
                  return (
                    <List.Item  key={el.id}>
                      <List.Content>
                        {el.firstname} {el.lastname}
                      </List.Content>
                      <List.Content>{el.phone}</List.Content>
                    </List.Item>
                  );
                })}
              </List>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    );
  }
}

export default App;

操场：

https://codesandbox.io/s/so-semantic-ui-jfobr

但我认为使用 Semantic-ui-react 中的 Table 组件会更好。

import React, { Component } from "react";
import {  Table } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Fullname</Table.HeaderCell>
            <Table.HeaderCell>Phone</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {contacts.map(el => {
            return (
              <Table.Row key={el.id}>
                <Table.Cell>{el.id}</Table.Cell>
                <Table.Cell>
                  {el.firstname} {el.lastname}
                </Table.Cell>
                <Table.Cell>{el.phone}</Table.Cell>
                <Table.Cell>{el.email}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    );
  }
}

export default App;

桌游乐园：

https://codesandbox.io/s/so-semantic-ui-28rq9

文档：

https://reactjs.org/docs/lists-and-keys.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

如果您想将该数据从另一个文件导入到您的组件中，您基本上可以导出数据所在的对象。

data.js

export default [
    {
        "id": 1,
        "firstName": "abc",
        "lastName": "xyz",
    },

    {
        "id": 2,
        "firstName": "def",
        "lastName": "uvz",
    }
]

在您的react组件中，您可以通过执行以下操作导入您的 json 数据

import data from './data.js'

您将需要遍历您的 json 数据以将必要的信息传递给您的组件

{data.map(person => {
   return (
    <List.Item block key={person.id}>
       <List.Content>
         {person.firstName} and {person.lastName} 
       </List.Content>
     <List.Content>{person.phone}</List.Content>
    </List.Item>
   )
})}

当心！ 列表元素也需要一个关键属性，否则react会抛出错误

这将为List.Item您拥有的关于人员的每个数据条目创建一个组件，然后通过访问firstName, lastName, phoneon person 对象，您将能够将该数据传递给您的组件。

例子

https://codesandbox.io/s/angry-chebyshev-djxq0?fontsize=14

有几种方法可以在 React 组件中导入 JSON 数据：

1. 使用 ES6 导入和导出
2. 将 JSON 数据添加到文件public夹中的文件中，假设您使用 Create React App 初始化了项目，然后在您的componentDidMount()方法中获取所述数据，最后将获取的数据添加到组件的状态中。
3. 如果数据是静态的，您可以在初始化组件时将其添加到组件的状态中。

实施1：

在文件中添加您的 JSON 数据，例如People.js：

const peopleData = [
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "abcyz@gmail.com"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
    }
];

export default peopleData;

然后在你的组件中，像这样导入它：

// myPeopleData will contain your json data
import myPeopleData  from '<Relative_Path>/People.js';

有关 ES6 导入和导出的更多信息，请查看这个很棒的备忘单。

实施2：

1. 在public包含 JSON 数据的目录中添加一个文件，假设它被称为people.json
2. 在您的组件中，添加componentDidMount()生命周期方法，然后获取您的数据。
3. 将获取的数据添加到组件的状态。

您的组件可能看起来像以下内容：

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: []
  };

  componentDidMount() {
      fetch('./people.json')
        .then(response => response.json())
        .then(data => this.setState({ peopleData: data }));
  }

  render() {
    ...
  }
}

export default MyComponent;

最后，实现 3：

在您的组件中，只需添加您的数据作为其默认状态的一部分：

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: [
      {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "abcyz@gmail.com"
      },
      {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "defvu@gmail.com"
      }
    ]
  };

  render() {
    ...
  }
}

export default MyComponent;

无论您采用何种方法导入 JSON 数据，您都需要在您的render()方法中映射结果数组。有关Array.protoype.map()方法的更多信息，请查看 MDN 的文档以及 React 的文档，以通过列表和渲染列表项进行映射。两者都是极好的资源。

希望这有帮助！