Применение фильтров к вложенным компонентам - PullRequest
Новая
       15

Применение фильтров к вложенным компонентам

3 голосов
/ 03 февраля 2020

Я пытаюсь применить пользовательский фильтр (для добавления правильно измененных суффиксов в Turki sh), используя компонент <Trans> и интерполяцию. Проблема заключается в том, что ключевая часть предложения, которая должна быть отражена (имя пользователя), отображается собственным компонентом. Есть ли способ условно применить фильтр к вложенному компоненту?

  • Я не могу напрямую использовать фильтр перегиба на внутреннем компоненте. Внутренний компонент используется в нескольких местах, и каждый контекст может нуждаться в разных фильтрах или вообще не иметь их.
  • Внутренний компонент просто получает идентификатор пользователя в качестве реквизита и извлекает свое собственное содержимое (имя пользователя) через реагируют-Redux. Внешний компонент (которому принадлежит контекст предложения) не имеет представления о содержимом внутреннего компонента.
  • Фильтры полезны для одного языка (Turki sh). Используемый фильтр должен быть частью файла перевода, поскольку все остальные языки не будут использовать эти фильтры. (Также, выбор фильтра - это работа переводчика)

Практически было бы полезно, если бы я мог сделать что-то подобное (но это не работает) 

{  // en.json
   newMessage: "You got a new message from <1>user</1>" 
}

{  // tr.json
   newMessage: "Size {{<1>user</1>, ablative_suffix}} yeni bir mesaj geldi" 
}

Который я бы sh отобразил бы что-то вроде "Размер Mert'ten yeni bir mesaj geldi" с именем пользователя "Mert". Есть ли другой способ сделать sh что-то подобное?

<User>

const User = ({ user }) => <strong>{user ? user.name: null}</strong>;

const mapStateToProps = (state, { id }) => ({ user: state.users[id] });

export default connect(mapStateToProps);

<NewMessage>

export const NewMessage = ({userId}) => 
    <Trans i18nKey="newMessage">
        You got a new message from <User id={userId}/>
    </Trans>;

1 Ответ

1 голос
/ 13 февраля 2020

Оформить заказ, https://codesandbox.io/s/react-i18next-2w5c2.

Я извлекаю children для компонента User (хакерский путь) и добавляю его как специальное значение _1_children, затем , используйте его переводы, которые Trans будут внедрять его как children для компонента, следовательно, есть children || 'data' как дочерние элементы User компонента.

Из всех моих попыток выглядит так не существует «чистого» способа сделать это, я думаю, что лучше подключиться к хранилищу редуксов самостоятельно (у вас есть id) и передать имя пользователя как переменную, как я сделал.

В любом случае, компонент i18next Trans поддерживает только ввод данных из перевода в Компонент, а не наоборот .

...