在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标签替换字符串的部分？

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

Answer 2

接受的答案已经两岁了。针对此问题，创建了问题3368，并基于工作于React的Facebook员工提供的解决方案，创建了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>
    );
  },
});

Answer 3

以下也应该有效(假设ES6),唯一的细微差别是文本实际上是在DIV元素中包装而不是在它之前,假设您要使用CSS作为实际间距,这应该不是问题.

const result = this.props.text.split(':').map(t => { return <div className='textItem'>{t}</div>; });

Answer 4

为 jsx 编写了一个实用函数。

const wrapTags = (text: string, regex: RegExp, className?: string) => {
  const textArray = text.split(regex);
  return textArray.map(str => {
    if (regex.test(str)) {
      return <span className={className}>{str}</span>;
    }
    return str;
  });
};

Answer 5

我已经找到了以下不包含第三方库或正则表达式的简单解决方案，也许它仍然可以帮助某人。

主要是使用 .replace() 将字符串替换为以字符串形式编写的常规 html，例如：

text.replace('string-to-replace', '<span class="something"></span>')

然后使用dangerouslySetInnerHTML元素内部渲染它。

完整示例：

const textToRepace = 'Insert :' // we will replace : with div spacer
const content = textToRepace.replace(':', '<div class="spacer"></div>') : ''

// then in rendering just use dangerouslySetInnerHTML
render() {
    return(
        <div dangerouslySetInnerHTML={{
            __html: content
        }} />
    )
}

Answer 6

你们正在使用复杂的方法，请保持简单：

function replaceJSX(str, find, replace) {
    let parts = str.split(find);
    for(let i = 0, result = []; i < parts.length; i++) {
        result.push(parts[i]);
        result.push(replace);
    }
    return result;
}

用法

replaceJSX(variable, ":", <br />);