如何在 React 中使用 props 来防止重复？

how can I use props to prevent duplication in react?

提问人：Amir.h Pooladi 提问时间：10/21/2023 最后编辑：BENARD PatrickAmir.h Pooladi 更新时间：10/21/2023 访问量：24

问：

如何使用 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>
  );
};
ReactJS Next.js 复制 Tailwind-CSS Dry

评论

答：

0赞 BENARD Patrick 10/21/2023 #1 
import React from "react";

const Item = ({item}) => (
      <div>
        <div className=" block text-landing-footer-contactUs text-lg font-medium mb-3 mt-9">
          {item}
        </div>
        <div className="text-landing-text font-normal text-sm leading-5  pt-2">
         
        </div>
      </div>
)

export const FindUs = () => {
  return (
    <div className="p-[6%]">
      <div className="  text-landing-title font-semibold text-4xl ">
        Find us
      </div>
      {['Address', 'Email Address','Phone Number'].map(item => <Item key={item} item={item} /> }
       
    </div>
  );
};

上一个：针对多种例外情况的 DRY 方法

下一个：如何在ReScript中做Try-Finally？