我正在尝试用 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 标签替换部分字符串的方法？
当您将 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>
);
}
});
接受的答案是 5 岁。针对这个问题 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>
);
},
});
以下也应该工作（假设 ES6），唯一的细微差别是文本实际上被包裹在一个 DIV 元素中，而不是在它前面，假设你要使用 CSS 来获得实际的间距，这应该不是问题。
const result = this.props.text.split(':').map(t => {
return <div className='textItem'>{t}</div>;
});
为 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;
});
};
你们正在使用复杂的方法，请保持简单：
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 />);