我正在尝试用JSX标签替换字符串的一部分,如下所示:
render: function() { result = this.props.text.replace(":",<div className="spacer"></div>); return ( <div> {result} <div> ); }
但考虑到this.props.text是Lorem : ipsum,它导致
this.props.text
Lorem : ipsum
<div> Lorem [object Object] ipsum. </div>
有没有一种方法可以解决此问题,或者有另一种方法可以用JSX标签替换字符串的一部分?
当将JSX元素replace()作为第二个参数传递时,该元素将转换为字符串,因为replace()期望将字符串作为第二个参数。您需要做的是将字符串转换为字符串和JSX元素的数组。因此您的result变量应包含['Lorem ', <div className="spacer"></div>, ' ipsum']。
replace()
result
['Lorem ', <div className="spacer"></div>, ' ipsum']
像这样:
function flatMap(array, fn) { var result = []; for (var i = 0; i < array.length; i++) { var mapping = fn(array[i]); result = result.concat(mapping); } return result; } var Comp = React.createClass({ render: function () { var result = 'Lorem : ipsum'; result = flatMap(result.split(':'), function (part) { return [part, <div>spacer</div>]; }); // Remove the last spacer result.pop(); return ( <div> {result} </div> ); } });