i18next - 将过滤器应用于嵌套组件

Question

我正在尝试使用<Trans>组件和插值应用自定义过滤器（用于在土耳其语中添加正确的变形后缀）。问题是句子中需要变形的关键部分（用户名）是由它自己的组件呈现的。有没有办法有条件地将过滤器应用于嵌套组件？

• 我不能直接在内部组件上使用屈折过滤器。内部组件在多个地方使用，每个上下文可能需要不同的过滤器或根本不需要过滤器。
• 内部组件只是获取一个用户 ID 作为道具，并通过 react-redux 获取自己的内容（用户名）。外部组件（拥有句子上下文）不知道内部组件的内容。
• 过滤器对单一语言（土耳其语）很有用。要使用的过滤器必须是翻译文件的一部分，因为所有其他语言都不会使用这些过滤器。（另外，选择过滤器是翻译的工作）

---

实际上，如果我能做这样的事情会有所帮助（但这不起作用）

{  // 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" 
}

我希望在给定用户名“Mert”的情况下呈现类似“Size Mert'ten yesi bir mesaj geldi”的内容。有没有另一种方法来完成这样的事情？

---

<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>;

标签： i18nextreact-i18next

Answer 1

查看此解决方案，https://codesandbox.io/s/react-i18next-2w5c2。

我正在提取childrenUser 组件上的 （hacky 方式）并将其添加为特殊值_1_children，然后使用它进行翻译，这Trans会将其注入children到组件中，因此，children || 'data'作为组件的子级存在User。

从我所有的尝试来看，似乎没有“干净”的方法可以做到这一点，我认为最好自己连接到 redux 商店（你有id）并像我一样将用户名作为变量传递。

无论如何，i18nextTrans组件只支持从翻译到组件注入数据，反之亦然。