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的道具却不起作用。

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

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

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

非常感谢。

Answer 1

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

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

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

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

将链接作为道具传递给Gatsby Link

1 个答案: