javascript - React components in i18next interpolation display as [object Object] - Stack Overflow

admin管理员组

文章数量:1417070

My React app uses next-i18next package. I'd like to put some React ponent inside my interpolation:

import React from 'react';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Review({ text, author }) {
  const { t } = useTranslation('reviews');

  return (
    <article>
      <p>{text}</p>
      <footer>
        {t('footer', { author: <a href={author.url}>{author.name}</a> })}
      </footer>
    </article>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['reviews']),
  }
});

And reviews.json:

{
    "footer": "By {{author}}, all rights reserved"
}

Trying to use JSX element to fill the interpolation doesn't work as expected. The result I'm getting is:

By [object Object], all rights reserved

I also tried with unescaped interpolation with By {{- author}}, all rights reserved, but it ends up being the same result.

Can I use JSX element to fill my interpolation?

My React app uses next-i18next package. I'd like to put some React ponent inside my interpolation:

import React from 'react';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Review({ text, author }) {
  const { t } = useTranslation('reviews');

  return (
    <article>
      <p>{text}</p>
      <footer>
        {t('footer', { author: <a href={author.url}>{author.name}</a> })}
      </footer>
    </article>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['reviews']),
  }
});

And reviews.json:

{
    "footer": "By {{author}}, all rights reserved"
}

Trying to use JSX element to fill the interpolation doesn't work as expected. The result I'm getting is:

By [object Object], all rights reserved

I also tried with unescaped interpolation with By {{- author}}, all rights reserved, but it ends up being the same result.

Can I use JSX element to fill my interpolation?

• javascript
• reactjs
• i18next
• react-i18next
• next-i18next

Share Improve this question Follow edited Mar 27, 2021 at 11:14 Robo Robok asked Mar 22, 2021 at 22:57 Robo RobokRobo Robok 22.9k2020 gold badges8383 silver badges144144 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can't use t function in order to inject jsx.

There is a special Trans ponent for this, you should use it.

import React from 'react';
import { useTranslation, Trans } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Review({ text, author }) {
  const { t } = useTranslation('reviews');

  return (
    <article>
      <p>{text}</p>
      <footer>
        <Trans
          i18nKey="footer"
          t={t}
          values={{ author }}
          ponents={{ authorLink: <a href={author.url}>placeholder</a> }}
        />
      </footer>
    </article>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['reviews'])),
  },
});

When in your translation file you will have:

{
  "footer": "My footer text <authorLink>{{author.name}}</authorLink>"
}

本文标签： javascriptReact components in i18next interpolation display as object ObjectStack Overflow