将链接作为 prop 传递给 Gatsby 时出错 Link

Question

在我的 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 的道具。

The link I get is of this kind, like it's not fetching the array content:

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

您知道为什么它没有占用我传递给它的数组吗？有什么我应该做的不同的事情来实现这个目标吗？

非常感谢。

Answer 1

您正在将组件传递到 Gatsby <Link/> 组件中的 to 道具。

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

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

我相信 to 属性只需要一个字符串值

将链接作为 prop 传递给 Gatsby 时出错 Link

Error when passing links as a prop to Gatsby Link

reactjs

react-router

gatsby

react-props