我需要使用 react js 根据提供的特定文本样式来格式化文本。例如:在这里我观察到一件事,如果我传递带有某些变量的文本,例如:const text = \'\\nBubble\\nAir\\nSKY...
我需要使用 react js 根据提供的文本特定样式来格式化文本。例如:
在这里我观察到一件事,如果我传递带有一些变量的文本,例如:
const text = "\\nBubble\\nAir\\nSKY";
<myComponent variableText={text} />
然后,当我检查传递的数据时,我的组件内部会显示如下内容:
"Bubble
Air
SKY"
如果我获取这种格式的数据,它对我来说工作正常。但是当我直接在组件中传递字符串文本时,如下所示:
<myComponent text="\nBubble\nAir\nSky" />
因此,在组件中检查传递的文本后,它显示与字符串相同的内容。例如:\'\nBubble\nAir\SKY\';
我们如何首先在 React js 中获取字符串值作为文本?
需要帮助
据我了解,您的组件如下:
const MyComponent = ({ text }) => {
return (
<div>
{text.split('\n').map((item, index) => (
<span key={index}>
{item}
<br />
</span>
))}
</div>
);
};
您可以使用您想要的特定分离器来修改您的组件,或者您也可以使用如下方法:
const formatText = (text) => {
return text.split('\n').map((item, key) => (
<span key={key}>
{item}
<br />
</span>
));
};