在 ReactJS 中创建电话号码和联系人列表

在 ReactJS 中，创建电话号码和联系人列表可以通过组件化的方式来实现。具体步骤如下：

步骤 1：创建基本组件结构

在 ReactJS 中，组件是构建用户界面的基本单元。我们可以创建一个名为ContactList的组件来展示联系人列表，另一个名为PhoneNumber的组件来展示电话号码。

先来创建ContactList组件的基本结构：

import React from 'react';

function ContactList() {
  return (
    <div>
      <h1>Contact List</h1>
      {/* Contact List goes here */}
    </div>
  );
}

export default ContactList;

以上代码表示ContactList组件包含一个<h1>标签，以及一个暂时空缺的 Contact List 列表。

接下来，再创建PhoneNumber组件的基本结构：

import React from 'react';

function PhoneNumber() {
  return (
    <div>
      <h3>Phone Number</h3>
      {/* Phone Number goes here */}
    </div>
  );
}

export default PhoneNumber;

这里，我们把<h3>标签作为电话号码的标题，暂时也不展示电话号码本身。

步骤 2：定义数据结构

在 ReactJS 中，我们通常将数据保存在组件的状态中。因此，在开始展示电话号码和联系人列表之前，我们需要先定义它们的数据结构。

以下是一个简单的数据结构定义，适用于本例：

const contacts = [
  {
    name: 'Alice',
    phoneNumber: '123-456-7890',
  },
  {
    name: 'Bob',
    phoneNumber: '987-654-3210',
  },
];

其中，每个联系人都有一个名字和一个电话号码。

步骤 3：传递数据

现在，我们已经定义了数据结构和基本的组件结构。接下来，需要将数据传递给组件，以便我们能够展示它们。

首先，在ContactList组件中，将联系人列表作为一个参数传递进来：

import React from 'react';
import PhoneNumber from './PhoneNumber';

function ContactList(props) {
  const { contacts } = props;

  return (
    <div>
      <h1>Contact List</h1>
      {contacts.map((contact) => <PhoneNumber contact={contact} />)}
    </div>
  );
}

export default ContactList;

这里，我们使用了Array.prototype.map方法来遍历联系人列表，并为每个联系人渲染一个PhoneNumber组件。注意，在PhoneNumber组件中，我们需要从props中获取contact属性，这个属性包含了联系人的所有信息。

接下来，在PhoneNumber组件中，展示电话号码的内容：

import React from 'react';

function PhoneNumber(props) {
  const { contact } = props;

  return (
    <div>
      <h3>{contact.name}</h3>
      <p>{contact.phoneNumber}</p>
    </div>
  );
}

export default PhoneNumber;

这里，我们使用了{}语法来将联系人的名字和电话号码显示出来。

步骤 4：使用组件

现在，我们已经完成了ContactList和PhoneNumber组件的创建，并成功将联系人列表和电话号码展示在了页面上，所有的代码都在src文件夹内。

如果需要在项目中使用它们，可以按如下方式导入：

import React from 'react';
import ReactDOM from 'react-dom';
import ContactList from './ContactList';

const contacts = [
  {
    name: 'Alice',
    phoneNumber: '123-456-7890',
  },
  {
    name: 'Bob',
    phoneNumber: '987-654-3210',
  },
];

ReactDOM.render(
  <ContactList contacts={contacts} />,
  document.getElementById('root')
);

这里，我们将<ContactList>包裹在ReactDOM.render()方法中，并将联系人列表作为contacts属性传递给组件。

现在，我们已经成功地在 ReactJS 中创建了电话号码和联系人列表！