将过滤器应用于嵌套组件答案

【问题标题】：Applying filters to nested components将过滤器应用于嵌套组件
【发布时间】：2020-02-13 16:18:20
【问题描述】：

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

我不能直接在内部组件上使用屈折过滤器。内部组件在多个地方使用，每个上下文可能需要不同的过滤器或根本不需要。
内部组件只是获取一个用户id作为prop，并通过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'tenyeni 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>;

【问题讨论】：

这行得通吗？ Size <1>{{user, ablative_suffix}}</1> yeni bir mesaj geldi
@felixmosh No. 嵌套组件是<User id={userId}/>。它在不知道 i18n 的情况下从 redux 存储中获取实际名称。我可以让<User> 可翻译，但是我需要一种方法来将翻译上下文传递给它，它可能在使用的每个地方都不同，对于每种语言。
我已经调试了 Trans 组件，它是允许渲染反应组件的组件，并且似乎它从翻译中获取组件的“孩子”，这意味着如果您的组件生成它是孩子，它将无法访问它。如果你迫切需要它，你可以编写自己的自定义 Trans 组件。
能否提供User的示例组件？
@felixmosh 给你。内部组件从 redux 获取其内容，这是棘手的部分。

标签： i18next react-i18next

【解决方案1】：

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

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

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

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

【讨论】：

&lt;User&gt;

&lt;NewMessage&gt;

`<User>`

`<NewMessage>`