Ошибка при передаче ссылок в качестве опоры на 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')}</>,
          ]}
        />

И затем, в файле локали Engli sh, у меня есть:

"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"
  },

Цель будет чтобы настроить все, включая ссылки, для каждой локали.

Однако, хотя это работает хорошо с большинством реквизитов, которые я передаю компоненту (включая массивы), это не работает для реквизита, который я передаю Ссылка.

Ссылка, которую я получаю, такого типа, как будто она не извлекает содержимое массива:

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

У вас есть представление о том, почему он не занимает массив, который я передаю ему? Есть ли что-то, что я должен сделать по-другому, чтобы добиться этого?

Большое спасибо.

Answer 1

Вы передаете компонент в to опору в компоненте Gatsby <Link/>.

Вам необходимо удалить <>, </> и фигурные скобки из массива featureButtonLink.

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

Я считаю, что to реквизит принимает только строковое значение