ReactJS 可以渲染字符串吗？答案

【问题标题】：ReactJS is it possible to render a string?ReactJS 可以渲染字符串吗？
【发布时间】：2016-02-02 15:35:00
【问题描述】：

我有一个返回字符串的代码，但由于它是在渲染中，它需要伴随一个 HTML 标记，在本例中为 span。

我想在多个地方使用此代码，包括占位符和标签，但使用 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}/>

底线差不多，我可以让render只返回一个没有任何标签的字符串还是让占位符接受并丢弃span标签？

问候。

【问题讨论】：

AFAIK 没有。但是为什么LocalizedString 必须是一个 React 组件呢？
工作人员让我重做我的原始代码，这只是一个对组件的函数调用，以实现更好的可访问性......因为输入 getKey('keyname') 太多了，我猜...... .

标签： javascript html reactjs

【解决方案1】：

您必须根据要求使用function 而不是React Component。

React 组件的 render 方法必须绑定返回 single wrapped markup 或本质上是一个 Virtual DOM。

【讨论】：