使用 React js 根据文本样式格式化文本-reactjs-IT问答社区-解决你的IT疑问

使用 React js 根据文本样式格式化文本

Muhannad Ali 2月前

我需要使用 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 中获取字符串值作为文本？

需要帮助

帖子版权声明 1、本帖标题：使用 React js 根据文本样式格式化文本
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Muhannad Ali在本站《reactjs》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

PhuongHoang68 2月前 0 只看Ta

引用 2楼

是的，我刚刚给了你例子，然后你可以直接使用这种样式={{ whiteSpace: 'pre-line' }}
yuxuan lin 2月前 0 只看Ta

引用 3楼
如果将其用作直接字符串，它将用作常规字符串，如果要破坏字符串，可以使用 formatter
```
const formattedText = text.split('\\n').join('\n');
```
现在您可以在组件中随意使用
```
    <div style={{ whiteSpace: 'pre-line' }}>
      {formattedText}
    </div>
```
然后当你使用它时你可以传递字符串 const text = "\nBubble\nAir\nSky";
Sergey Kalinichenko 2月前 0 只看Ta

引用 4楼

仅当我以文本格式获取字符串时，上述代码才会起作用，如果它是字符串格式，则不会在那里找到“\n”。
McPherson 2月前 0 只看Ta

引用 5楼
据我了解，您的组件如下：
```
 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>
  ));
};
```
Jens 2月前 0 只看Ta

引用 6楼

这段代码对我来说很好用。在这种情况下，它首先将 \n 替换为
然后我分手了
并执行我的代码来满足我的要求。我会将其标记为答案。
Lance 2月前 0 只看Ta

引用 7楼
const MyComponent = ({ text }) => { // Replace \n with <br> tags for HTML rendering const formattedText = text.replace(/\\n/g, '<br>'); return ( <div dangerouslySetInnerHTML={{ __html: formattedText }} /> ); };
尝试使用 dangerouslySetInnerHTML