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的文件中，我有這個，但是使占位符返回undefined ...

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

最底線是多少，我可以使render僅返回沒有任何標簽的字符串，還是可以讓占位符接受並丟棄span標簽嗎？

問候。

Answer 1

根據要求，您必須必須使用function而不是React Component 。

必須綁定React Component的render方法以返回single wrapped markup或本質上返回一個Virtual DOM 。