反应组件里面内插的反应组件

我有一个简单的<Trans/>反应组件，它允许翻译具有一些属性的键（我使用sprintf）。例如：反应组件里面内插的反应组件

<Trans planet="World">Hello %(planet)s</Trans>

呈现：

的Hello World

问题努力使其中的一些特性的动态时，说的不是 “世界” 我想有

<Trans color="blue">%(color)s planet</Trans>

现在，什么反应是首先输出以下内容：

你好[目标对象]

之前下降渲染路径和正确渲染

你好蓝色星球

这导致呈现出一个小的Flickr [对象对象]而不是渲染的元素。我试图使用renderToString，但是这会迫使我使用一些危险的SetInnerHTML，它不适用于其他翻译约束。

有什么想法？

import React, {PropTypes, Component} from 'react' 
import {sprintf} from 'sprintf-js' 

export default class Trans extends Component { 
    translate(key, args){ 
    if(this.props.context && this.props.context[key]) key = this.props.context[key] 
    else console.error('%s is not in translated keys', key, ' - context was ', this.props.context) 
    if(typeof key === 'object' && key.singular){ 
     if(this.props.isPlural) 
     return sprintf(key.plural, args) 
     else 
     return sprintf(key.singular, args) 
    } 
    return sprintf(key, args) 
    } 

    render() { 
    return (
     <span> 
     {this.translate(this.props.children, this.props)} 
     </span> 
    ) 
    } 
}

来源

2015-12-14 Samuel Delesque

'％（color）s planet'什么是动态的？看起来与 Hello％（planet）s'相同，但是具有不同的道具名称。 – theodor

您需要确保颜色原型上的#toString()方法返回您想要的。

来源

2015-12-14 22:18:46 ianks

对不起，我应该在第一时间把全班同学包括在内，但现在就加入。没有toString方法 - 它只是一个sprintf函数，用props传递的数据替换props.children中的键。 –

反应组件里面内插的反应组件

回答

相关问题