react项目/jsx文件里怎么用<pre>标签?

本文探讨了在HTML与React/JSX环境中&lt;pre&gt;标签的不同表现,并提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在HTML文件中,想要浏览器识别多个空格、自动换行等,一个< pre >标签干进去就可以。

<pre>
    我是陈独秀
    今天是我的场
    有你李  大   钊       什么事!!!
</pre>
复制代码

那么你在浏览器看到的效果就是:


那么在react项目/jsx文件中能不能这样用? 答案是不能!!!看我代码:

    Modal.info({
      title: '话术',
      content: (
        <pre>
            我是陈独秀
            今天是我的场
            有你李  大   钊       什么事!!!
        </pre>
      ),
      onOk: () => { },
      okText: '确定',
      width: 300,
    });
复制代码

为了看的效果更直观,我用ant-design里的< Modal >来装< pre >,模态框里的内容变成这样:

不仅不换行,连多个空格都识别不出来,不能忍! 查了很多资料才发现jsx文件中要这么用:

{`
<pre>
    我是陈独秀
    今天是我的场
    有你李  大   钊       什么事!!!
</pre>
`}
复制代码

看到这里你会以为这是教学,你错了! 我的目的是请教一下大佬们,为什么jsx文件里不能像HTML那样用?

是个链接你们都会点,但是这里面真的没东西

转载于:https://juejin.im/post/5adb3e8ef265da0b722ab262

import React, { useState, useEffect } from 'react'; import DOMPurify from 'dompurify'; // 用于安全净化 HTML,防止 XSS const HtmlEmbedder = () => { // 状态管理:存储 HTML 内容、加载状态、错误信息 const [htmlContent, setHtmlContent] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // 假设 demo.html 在 public 文件夹下,URL 为 /demo.html const fetchHtmlWithStyles = async () => { try { // 1. 加载 HTML 内容 const htmlResponse = await fetch('/home.html'); if (!htmlResponse.ok) throw new Error('HTML 加载失败'); const htmlText = await htmlResponse.text(); const sanitizedHtml = DOMPurify.sanitize(htmlText); // 2. 解析 DOM 并提取资源 const parser = new DOMParser(); const tempDoc = parser.parseFromString(sanitizedHtml, 'text/html'); // 3. 提取所有 CSS 资源 const extractedResources = []; // 处理 <link> 标签 (外部 CSS) const links = tempDoc.querySelectorAll('link[rel="stylesheet"]'); for (const link of links) { try { const cssResponse = await fetch(link.href); if (!cssResponse.ok) continue; const cssText = await cssResponse.text(); extractedResources.push({ type: 'external', content: cssText, origin: link.href }); link.remove(); // 移除原链接标签 } catch (e) { console.error(`CSS加载失败: ${link.href}`, e); } } // 处理 <style> 标签 (内联 CSS) const styles = tempDoc.querySelectorAll('style'); styles.forEach(style => { extractedResources.push({ type: 'inline', content: style.textContent }); }); // 4. 创建样式合并容器 const styleContainer = document.createElement('style'); styleContainer.textContent = extractedResources .map(res => `/* ${res.type === 'external' ? 'From: ' + res.origin : 'Inline CSS'} */\n${res.content}`) .join('\n\n'); setLoading(false); } catch (err) { setError('加载错误: ' + err.message); setLoading(false); } }; fetchHtmlWithStyles(); }, []); // 空依赖数组确保只运行一次 // 渲染组件 return ( <div> <h2>嵌入外部 HTML 文件</h2> {loading && <p>Loading HTML content...</p>} {error && <p style={{ color: 'red' }}>{error}</p>} {/* 安全渲染 HTML,使用 dangerouslySetInnerHTML */} <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> </div> ); }; export default HtmlEmbedder; 完整的生成html和css并放到return的div中
06-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值