在reactJS和最佳实践中重用标记

Question

我正在学习反应，我正在尝试重复使用代码（我告诉他们有关反应的好处之一）。我目前有以下标记，其中导入的数据集如此。我试图使用cellHeight-8遍历数据集，但事实证明这很困难。当涉及到循环数据时，是否有一种最佳实践（稍微讨论集中而不仅仅是作为堆栈溢出轮廓的回答，但我试图学习）。感谢

JS

.map

数据

下面我提供了我的数据结构以供参考。不确定是否有必要。

import {recommendedActivities3} from '../../data/mocks'
import {recommendedActivities4} from '../../data/mocks'


<Link className={`PageCell recommended`} to={`/places/top-activities/${recommendedActivities3.id}`}>
                <div className={`restaurantCard-main recommended`}>
                <span className="host-recommendation-text">Host recommended</span>
                  <div className={`restaurantCard recommended`}>
                    <img className={`photo activity`} src={recommendedActivities3.image_url} size="small" alt="activities" />
                    <div className={`restaurantCard-right`}>
                      <div className="name">{recommendedActivities3.name}</div>
                      <div className="description"><p>{recommendedActivities3.description}</p></div>

                    </div>
                  </div>
                </div>
              </Link>
              <Link className={`PageCell recommended`} to={`/places/top-activities/${recommendedActivities4.id}`}>
                <div className={`restaurantCard-main recommended`}>
                <span className="host-recommendation-text">Host recommended</span>
                  <div className={`restaurantCard recommended`}>
                    <img className={`photo activity`} src={recommendedActivities4.image_url} size="small" alt="activities" />
                    <div className={`restaurantCard-right`}>
                      <div className="name">{recommendedActivities4.name}</div>
                      <div className="description"><p>{recommendedActivities4.description}</p></div>
                      {/*<CellContent recommendedActivities={recommendedActivities} recHeight={recHeight} normalHeight={normalHeight} />*/}
                    </div>
                  </div>
                </div>
              </Link>

Answer 1

因此，假设您有一些小组件要用于呈现一个推荐的活动链接。它会看起来像这样

tabular

这使它成为可重用的组件。那么你使用它的方式是这样的： 首先，让我们制作一系列推荐的活动来使用\tabcolsep

现在在render方法中，您只需为数组中的每个元素调用特定组件

const RecommendedActivity = ({activity}) => {
  return (
    <Link className="PageCell  recommended" to={`/places/top-activities/${activity.id}`}>
      <div className="restaurantCard-main recommended">
        <span className="host-recommendation-text">Host recommended</span>
        <div className="restaurantCard recommended">
          <img className="photo activity" src={activity.image_url} size="small" alt="activities" />
          <div className="restaurantCard-right">
              <div className="name">{activity.name}</div>
              <div className="description"><p>{activity.description}</p></div>
          </div>
        </div>
      </div>
    </Link>
  )
}