Question

我正在尝试使用<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'ten yeni 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>;

Answer 1

签出此解决方案https://codesandbox.io/s/react-i18next-2w5c2。

我正在提取用户组件上的children（以怪异的方式）并将其添加为特殊值_1_children，然后使用其翻译，Trans会将其注入为{ {1}}，因此，children作为children || 'data'组件的子代。

从我的所有尝试看来，似乎没有“干净”的方法，我认为最好自行连接到redux存储（您有User）并通过用户名作为变量，就像我一样。

无论如何，i18next id组件仅支持将数据从转换中注入到Component中，反之亦然。

将过滤器应用于嵌套组件

<User>

<NewMessage>

1 个答案:

`<User>`

`<NewMessage>`