时间戳

首页 > 解决方案 > 将链接作为道具传递给 Gatsby Link 时出错

reactjs - 将链接作为道具传递给 Gatsby Link 时出错

问题描述

在我的 Gatsby JS 网站中，我创建了这个组件，我试图将一组链接传递给 Link，作为道具。

        ...
            {props.features.map((feature, idx) => (
              <div className="column is-4 has-text-centered">
                <div
                  className="content bordered"
                  style={{ width: '100%', height: '100%' }}
                >
                  <div className="title is-4">
                    {props.featureTitle[idx]}
                  </div>
                  <p>{props.featureDesc[idx]}</p>
                  {props.featureButton && (
                    <Link
                      className="button is-success is-medium"
                      to={props.featureButtonLink[idx]}
                    >
                      {props.featureButton[idx]}
                    </Link>
                  )}
                </div>
              </div>
            ))}
        ...

在使用这个组件的页面中，我也是使用 i18n 来添加翻译，像这样：

        <ComponentA
          features={[1, 2, 3, 4, 5, 6]}
          featureTitle={[
            <>{t('about.feature1')}</>,
            <>{t('about.feature2')}</>,
            <>{t('about.feature3')}</>,
            <>{t('about.feature4')}</>,
            <>{t('about.feature5')}</>,
            <>{t('about.feature6')}</>,
          ]}
          featureDesc={[
            <>{t('about.feature1desc')}</>,
            <>{t('about.feature2desc')}</>,
            <>{t('about.feature3desc')}</>,
            <>{t('about.feature4desc')}</>,
            <>{t('about.feature5desc')}</>,
            <>{t('about.feature6desc')}</>,
          ]}
          featureButton={[
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
          ]}
          featureButtonLink={[
            <>{t('about.featureButtonLink1')}</>,
            <>{t('about.featureButtonLink2')}</>,
            <>{t('about.featureButtonLink3')}</>,
            <>{t('about.featureButtonLink4')}</>,
            <>{t('about.featureButtonLink5')}</>,
            <>{t('about.featureButtonLink6')}</>,
          ]}
        />

然后，在英语语言环境文件中，我有：

"about": {
    "feature1": "Business Development",
    "feature1desc": "BD description",
    "feature2": "Microeconomics",
    "feature2desc": "Microeconomics description",
    "feature3": "Market Research",
    "feature3desc": "Market Research description",
    "feature4": "Industrial Engineering",
    "feature4desc": "IE description",
    "feature5": "Business English",
    "feature5desc": "BE description",
    "feature6": "Marketing",
    "feature6desc": "Marketing Description",
    "featureButton": "Discover",
    "featureButtonLink1": "/business-dev",
    "featureButtonLink2": "/micro",
    "featureButtonLink3": "/market",
    "featureButtonLink4": "/industrial-eng",
    "featureButtonLink5": "/business-english",
    "featureButtonLink6": "/marketing"
  },

目的是为每个语言环境定制所有内容，包括链接。

然而，虽然这适用于我传递给组件的大多数道具（包括数组），但它不适用于我传递给 Link 的道具。

我得到的链接是这种类型的，就像它没有获取数组内容一样：

http://localhost:8000/[object%20Object]

你知道为什么它不占用我传递给它的数组吗？为了实现这一目标，我应该做些什么不同的事情吗？

非常感谢。

标签： reactjsreact-routergatsbyreact-props

解决方案

您正在将一个组件传递给toGatsby 组件中的 prop <Link/>。

您需要从数组中删除<>,</>和大括号。featureButtonLink

<ComponentA
    ...
    featureButtonLink={[
        t('about.featureButtonLink1'),
        t('about.featureButtonLink2'),
        t('about.featureButtonLink3'),
        t('about.featureButtonLink4'),
        t('about.featureButtonLink5'),
        t('about.featureButtonLink6'),
    ]}
/>)

我相信to道具只需要一个字符串值

推荐阅读