我有一个返回字符串的代码,但由于它是在渲染时,因此需要附有 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}/>
底线差不多了,我可以让渲染返回一个没有任何标签的字符串,或者让占位符接受并丢弃span标签吗?
问候。
最佳答案
根据要求,您必须使用函数
而不是React组件
。
React 组件的 render
方法必须绑定(bind)为返回单包装标记
或本质上是一个虚拟 DOM
。
关于javascript - ReactJS 可以渲染字符串吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33482920/