Невозможно использовать узел <Text /> как переведенную строку для объекта - PullRequest
Новая
       11

Невозможно использовать узел <Text /> как переведенную строку для объекта

2 голосов
/ 10 июля 2019

В проекте, над которым я сейчас работаю, нам нужно было поддерживать несколько языков, поэтому в итоге мы использовали preact-шлем , чтобы ввести заголовок и соответствующие метатеги для каждого из представлений приложения, но я не могучтобы он работал с {{fields}} заполнителями, поэтому я создал этот пример проекта, чтобы продемонстрировать проблему.

Как установить и запустить пример проекта

  • Клонировать репозиторий с помощью git clone git@github.com:acangiani/preact-i18n-issue.git
  • Установить зависимости: npm install
  • Запустить проект npm run start

Первый просмотр

Этот работает нормально и корректно добавляетзаголовок и метатег заголовка.

Делая curl http://localhost:3000/, это выводит следующий html: 

...
<title>Foo - Bar</title>
<meta name="title" content="Foo - Bar" data-preact-helmet="true">
...

Второе представление

С другой стороны, в этом представлении мне нужно былочтобы использовать {{field}} заполнитель, то есть curl http://localhost:3000/test, это выдает следующий html: 

...
<title>test - Bar</title>
<meta name="title" content="[object Object]" data-preact-helmet="true">
...

То, что я пробовал

  1. Использование @withText в качестве декоратора на второмпросматривать, но я не могу получить доступ к реквизиту.
  2. Пытался использовать withText как оболочка для функционального компонента, чтобы получить переведенный текст, но я не смог заставить его работать.
  3. Попытка визуализировать компонент в строку типа: 
render(<Text id="second.title" " fields={{ field: props.slug }}>default text</Text>)

но я получил только текст по умолчанию, независимо от определений i18n, загруженных в IntlProvider.

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

1 Ответ

4 голосов
/ 11 июля 2019

Как указано здесь , это правильное решение: 

@withText((props) => ({
  title: <Text id="second.title" fields={{ field: props.slug }} />
}))
export default class SecondView extends Component {
  render(props, state) {
    return (
      <div>
        <Helmet
          title={props.title}
          meta={[
            {name: "title", content: props.title },
          ]}
        />
      </div>
    );
  }
};
...