Реакция компонента внутри интерполированного компонента React

Question

У меня есть простой <Trans/> React Component, который позволяет перевести ключ с некоторыми свойствами (я использую sprintf). Например:

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

оказывает:

Hello World

Этот вопрос при попытке вынести некоторые из этих свойств динамически, скажем, вместо "Мир" Я хочу иметь

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

Теперь, что реагирует, сначала выводится следующее:

Здравствуйте [объект Object]

Прежде чем идти вниз по визуализации пути и правильно делают

Привет голубая планета

Это приводит к небольшому фликру показа [ объект Object] вместо отображаемого элемента. Я попытался использовать 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> 
    ) 
    } 
} 

Answer 1

Вы должны убедиться, что #toString() метод на цветовом прототип возвращает то, что вы хотите.