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

Question

我正在尝试用 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 标签替换部分字符串的其他方法？

原文由 Magnus Engdal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>
    );
  }
});

原文由 Anders Ekdahl 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

公认的答案在 2015 年运行良好，但现在存在更好的解决方案。

针对这个问题，issue #3368 被创建，并且基于 Facebook 员工在 React 上提供的解决方案， react-string-replace 被创建。

使用 react-string-replace，这是解决问题的方法

const reactStringReplace = require('react-string-replace');

const HighlightNumbers = React.createClass({
  render() {
    const content = 'Hey my number is 555:555:5555.';
    return (
      <span>
        {reactStringReplace(content, ':', (match, i) => (
          <div className="spacer"></div>
        ))}
      </span>
    );
  },
});

原文由 Matthew Barbara 发布，翻译遵循 CC BY-SA 4.0 许可协议