在JSX中用标签替换字符串的一部分

小编典典

在JSX中用标签替换字符串的一部分

reactjs

我正在尝试用JSX标签替换字符串的一部分，如下所示：

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

但考虑到this.props.text是Lorem : ipsum，它导致

<div>
    Lorem [object Object] ipsum.
</div>

有没有一种方法可以解决此问题，或者有另一种方法可以用JSX标签替换字符串的一部分？

阅读 758

2020-07-22

共1个答案

小编典典

当将JSX元素replace()作为第二个参数传递时，该元素将转换为字符串，因为replace()期望将字符串作为第二个参数。您需要做的是将字符串转换为字符串和JSX元素的数组。因此您的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>
    );
  }
});

2020-07-22