如何用另一个react组件再次替换字符串的一部分?这是一个理论上的例子,当然是行不通的……但这是自我解释。
const text = "hello world";
const parts = text.split(" ");
temp1 = parts.map(part => {
return part.match(/hello/) ?
`<b>${part}</b>` :
part.match(/world/) ?
`<i>${part}</i>`:
part
})
text1 = `<div>${temp1.join(' ')}</div>`;
console.log(text1)
结果: <div><b>hello</b> <i>world</i></div>
让我们从没有React开始,并尝试分解您正在做的事情(我将使用字符串而不是jsx):
let text = "hello world";
let reg, parts;
reg = new RegExp(/hello/);
parts = text.split(reg);
temp1 = parts.map(part => part.match(reg) ? `<b>${part}</b>` : part)
text1 = `<div>${temp1}</div>`;
reg = new RegExp(/world/);
parts = text.split(reg);
temp2 = parts.map(part => part.match(reg) ? `<i>${part}</i>` : part)
text2 = `<div>${temp2}</div>`;
console.log(text1)
console.log(text2)
.as-console-wrapper { max-height: 100% !important; top: 0; }
输出为:
<div>, world</div>
<div>hello ,</div>
这是你想要的吗?我假设不是。
顺便说一句,正如您所知,当您创建零件阵列时 parts = text.split(reg);
您首先收到类似的数组["", " world"]
,其次收到:["hello ", ""]
我认为这不是您所期望的,或者至少它无助于实现我认为想要的输出?
假设您实际上希望将此作为输出?-我们称它为“ A”:
<div><b>hello</b> <i>world</i></div>
也许您想要这个?(您的问题不太清楚)-我们称其为“ B”:
<div><b>hello</b></div>
<div><i>world</i></div>
因此,让我们尝试实现A:
const text = "hello world";
const parts = text.split(" ");
temp1 = parts.map(part => {
return part.match(/hello/) ?
`<b>${part}</b>` :
part.match(/world/) ?
`<i>${part}</i>`:
part
})
text1 = `<div>${temp1.join(' ')}</div>`;
console.log(text1)
.as-console-wrapper { max-height: 100% !important; top: 0; }
输出(A):
<div><b>hello</b> <i>world</i></div>
现在让我们尝试B:
const text = "hello world";
const parts = text.split(" ");
temp1 = parts.map(part => {
return part.match(/hello/) ?
`<b>${part}</b>` :
part.match(/world/) ?
`<i>${part}</i>`:
part
})
text1 = temp1.map(part => {
return `<div>${part}</div>`
})
console.log(text1.join('\n'))
.as-console-wrapper { max-height: 100% !important; top: 0; }
输出(B):
<div><b>hello</b></div>
<div><i>world</i></div>
请编辑您的问题,以确切说明您要寻找的输出。
更新,现在编辑问题后,很清楚所需的输出是什么,所以我现在将其输入响应:
在堆栈溢出代码段上似乎不起作用,
但是它确实可以在codePen中使用:https ://codepen.io/Alexander9111/pen/VwLGzpJ
输出:
function Example() {
const text = "hello world";
const modText = text.replace(/ /g, ", ");
const parts = modText.split(",");
return (
<>
{parts.map(part => {
return part.match(/hello/) ? (
<b>{part}</b>
) : part.match(/world/) ? (
<i>{part}</i>
) : (
part
);
})}
</>
);
}
ReactDOM.render(<Example />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句