如何在React中使用Props避免代码重复？

我在编写FindUs组件时，地址、邮箱地址、电话号码模块存在大量重复代码，请问如何通过Props来避免这类重复？原组件代码如下：

import React from "react";
export const FindUs = () => {
  return (
    <div className="p-[6%]">
      <div className=" text-landing-title font-semibold text-4xl "> Find us </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9"> Address </div>
        <div className="text-landing-text font-normal text-sm leading-5 pt-2"> </div>
      </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9"> Email Address </div>
        <div className="text-landing-text font-normal text-sm leading-5 pt-2"> </div>
      </div>
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9"> Phone Number </div>
        <div className="text-landing-text font-normal text-sm leading-5 pt-2"> </div>
      </div>
    </div>
  );
};

解决方案：提取可复用子组件并通过Props传值 #

1. 创建可复用的ContactItem组件 #

把重复的模块抽成独立组件，通过title和content两个Props接收动态内容：

import React from "react";

// 可复用的联系项组件
export const ContactItem = ({ title, content }) => {
  return (
    <div>
      <div className="block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
        {title}
      </div>
      <div className="text-landing-text font-normal text-sm leading-5 pt-2">
        {content}
      </div>
    </div>
  );
};

2. 重构FindUs组件 #

用数据数组循环渲染ContactItem，每个元素包含对应标题和内容：

import React from "react";
import { ContactItem } from "./ContactItem"; // 导入子组件

export const FindUs = () => {
  // 定义联系信息数据
  const contactInfo = [
    { title: "Address", content: "你的具体地址内容" },
    { title: "Email Address", content: "your.email@example.com" },
    { title: "Phone Number", content: "+123 456 7890" }
  ];

  return (
    <div className="p-[6%]">
      <div className="text-landing-title font-semibold text-4xl">Find us</div>
      {/* 循环渲染所有联系项 */}
      {contactInfo.map((item, index) => (
        <ContactItem key={index} title={item.title} content={item.content} />
      ))}
    </div>
  );
};

核心优势 #

• 消除重复代码：修改样式或结构时只需在ContactItem组件中改一次，所有实例同步更新
• 提升可维护性：联系信息集中在数组中，后续新增/修改项更便捷
• 符合React设计思想：将通用UI封装为独立组件，通过Props传递动态数据实现复用

内容的提问来源于stack exchange，提问作者Amir.h Pooladi