ReactJS можно визуализировать строку?

Question

У меня есть код, который возвращает строку, но поскольку она находится в рендере, она должна сопровождаться тегом HTML, в этом случае span.

Я хочу использовать этот код в нескольких местах, включая заполнители и метки, но с диапазоном, я считаю, что это невозможно.

Вот код, о котором идет речь, были бы признательны за некоторые идеи о том, как исправить.

let LocalizedString = React.createClass({ 
render: function() { 

    if (!this.getKey(loadLang, this.props.xlKey)) { 
     return <span>{this.props.xlKey + ' untranslated in ' + userLang + ' JSON'}</span>; 
    } else { 
     return <span>{this.getKey(loadLang, this.props.xlKey)}</span>; 
    } 
}, 

getKey: function(obj, str) { 
    str = str.replace(/\[(\w+)\]/g, '.$1'); // let's convert indexes to properties 
    str = str.replace(/^\./, ''); // gets rid of leading dot 

    let a = str.split('.'); 

    for (let i = 0, n = a.length; i < n; i++) { 
     let key = a[i]; 

     if (key in obj) { 
      obj = obj[key]; 
     } else { 
      return null; 
     } 
    } 
    return obj; 
}, 
}); 

module.exports = LocalizedString; 

В другом файле, который вызывает LocalizedString, у меня есть, но делает замещающий возврат неопределенный ...

<TextField alert={alerts.username} onChange={this._onChangeUsername} placeholder={<LocalizedString xlKey='pages.signin.general.username'/>} ref="username" value={this.props.username}/> 

Нижняя линия довольно много, я могу сделать рендеринг возвращать только строку без каких-либо тегов или сделать placeholder принимать и отбрасывать тег span?

С уважением.

Answer 1

Вам необходимо использовать function вместо React Component согласно требованию.

Метод реактивного компонента render должен быть связан с возвратом single wrapped markup или по существу a Virtual DOM.