используя ссылки в Reaction-i8next

Question

Я учился реагировать через онлайн-источники, и я не могу найти решение для моей проблемы -

предположим, у меня есть файл json -

"test":"This is a test file, contact at {{email}}"

и в настоящее время я использую его как -

const [t] = useTranslation();

<div>t('test',{{email}})<div>

предположим, что я хочу изменить только цвет текста электронного письма, как мне это сделать? Я провел онлайн-исследование и прочитал документацию по Транкомпоненту, но не могу понять, как это реализовать.

Answer 1

Вам придется исключить заполнитель {{email}} из переведенного текста.

Так что это будет часть i18n:

{
  "test": "This is a test file, contact at"
}

И это будет часть React:

const { t } = useTranslation();

return (
  <div>
    {t("test")} <span style={{color: "hotpink"}}>{email}</span>
  </div>
);

Существует множество вариантов того, что вы пытаетесь сделать (например, используя внешнюю таблицу стилей, CSS классы и т. Д.), Но это будет прямой подход.

Answer 2

Вы можете справиться с этим, используя файл css, для этого вам необходимо импортировать его в файл компонента react:

import './styles.css';

Чтобы это работало, вы должны создать файл style.css в той же папке / каталоге вашего react файла, после чего вы должны установить правило css:

style. css

a {
  color: hotpink;
}