当前位置: 首页 > news >正文

React中渲染html结构---dangerouslySetInnerHTML

  1. dangerouslySetInnerHTML
  2. 胡子{}语法绑定的内容全部作为普通文本渲染,渲染html结构基于---dangerouslySetInnerHTML
  3. dangerouslySetInnerHTMLReact标签的一个属性,类似于vue的v-html
  4. 有2个{{}},第一个{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对。
   <divclassName="content"dangerouslySetInnerHTML={{__html: info.body,}}></div>

例如渲染下面的结构

"<div class="main-wrap content-wrap">
<div class="headline"><div class="img-place-holder"></div></div><div class="content-inner"><div class="question">
<h2 class="question-title"></h2><div class="answer"><div class="meta">
<img class="avatar" src="https://picx.zhimg.com/v2-c001cfc335220ed09d125e9f3b154fcf_l.jpg?source=8673f162">
<span class="author">小虾汉斯</span>
<a href="https://www.zhihu.com/question/60732762/answer/470928669" class="originUrl" hidden>查看知乎原文</a>
</div><div class="content">
<p>苏联军事百科有一句话说得很有道理,百年战争是整个西方战史从<strong>冲击战(Shock)转向杀伤战的转折点</strong>。古代战争和早期封建战争,战争形式主要是冲击战,取胜方式就是主要靠让对方士气崩溃、四散奔逃,而我在后面尽情追杀,虽然也有坎尼这样的特例,但是大多数时候的普遍情况都是将敌人逐出战场,所以在古代战争中,一般谁控制了战场就算谁是胜利方。</p>
<p>但是英国和法国打,不能这样做,英格兰没有足够数量的骑兵,很难在追击战中取得很大战果,所以,<strong>只能寄希望于在合战阶段本身就大量歼敌</strong>,于是在百年战争初期,英军就不知不觉间开启了杀伤战的理论。在战术形式上的表现是,在比较易于防守的地形(如高地、两个树林之间)设置阵地,等敌人来冲,然后凭借威尔士长弓手万箭齐发,以及我方以逸待劳、地形优势,尽可能多杀敌。</p>
<p>这里就要说,战争前期的法军战力其实并不弱,甚至可以用悍不畏死来形容。我另外一贴说到,封建军队将领指挥得细,对于恢复部队士气和组织其实有一定作用,所以才能够不计损失反复突击,而当时法国王军在欧洲大陆战争中屡战屡胜,地方骑士在十字军战争中战绩也很突出,之所以惨败,就在于法国人对英国人打<strong>杀伤战的新形式认识不足,导致将领和精锐骑兵在合战中大量阵亡,结果正中英国人下怀。</strong></p>
<p>以下一些数据:</p>
<p>1337 年克雷西战役,法国<strong>1 名国王阵亡</strong>(法国盟国波西米亚国王),<strong>11 名大贵族阵亡</strong>,其中包括洛林公爵、波旁公爵、弗兰德伯爵、布洛瓦伯爵、沃德蒙特伯爵、奥梅尔伯爵战死沙场,<strong>1542 名骑士战死</strong>,另有 1400 绅士殒命。普通士兵的阵亡数目则更多。</p>
<p>1356 年普瓦捷战役,法军 2500 人阵亡,1900 人被俘,其中包括国王约翰。</p>
<p>1415 年阿金库尔战役,这场战役数据争议比较大,法军阵亡从 1500 到 11000 都有,被俘 700-2200 人。但法军有生力量损失必定极为重大无疑,因为之前法军主力还在追着亨利五世打,之后亨利五世干脆打下巴黎了。</p>
<figure><img class="content-image" src="https://pic1.zhimg.com/v2-b8577ac2fa57ce5c08b4010a528c5d0a_720w.jpg?source=8673f162" alt=""></figure>
<p>战争最初(其实就是克雷西之战),法军战败的原因还可以归结为长弓确实凶猛,但之后,就不是了。此后法军因为忌惮长弓的威力,普遍采取下马作战变成重步的战法,同时法军的盔甲也改进得越来越精良。结果法军却发现这样还是打不过英军,原因有以下几条:</p>
<ol>
<li>英国那帮自耕农弓箭手,肉搏能力还真不弱。中世纪前期战争,肉搏往往不会下杀手,因为俘虏赚取的赎金是一笔重要收入来源,英国自耕农就不管那些,能一击毙命就绝不用两刀(继续贯彻杀伤战),加上地形烂,轻装的弓箭手反而肉搏中越战越勇。</li>
<li>英国国王(或者黑太子、贝德福公爵)指挥确实比法军有效率,纪律比法军严明,这说起来是一个很大的话题,这可以归结为从“末日审判书“开始英国中央集权就比欧洲其它国家强,法国中央集权强于欧洲大陆其它国家,但还是不如英国。但是两军并没有超出封建军队的范畴。法国骑士不怕死,英国骑士也一样,最后因为地形不利,先崩溃的往往还是法军。</li>
<li>法军下马作战,反而丧失了机动性,且不说身披重甲在复杂地形中移动困难(板甲其实不算笨重,但在阿金库尔烂泥地里就不同了),反而进一步陷入了高陵勿向的大忌。</li>
</ol>
<p>之所以贞德一出,法国局势立刻好转,是因为贞德之后,法军也开始打杀伤战了。</p>
<p>1.因为锁子甲时代,法军骑兵面向英军长弓冲锋遭到屠杀,很多人认为这样做等于自杀,贞德不管那些,重新下令骑马冲锋,并且自己身先士卒(下图),结果法国骑士惊喜的发现,因为自己现在穿板甲,威尔士长弓没那么厉害了。</p>
<figure><img class="content-image" src="https://pic1.zhimg.com/v2-a7b3bb37028bc2a760645def359e5c20_720w.jpg?source=8673f162" alt=""></figure>
<p>2.贞德大量部署新式武器——火炮配合进攻,于是英国人的深沟营垒也没有那么有用了。</p>
<p>3.最重要的一点,贞德根本不管骑士战争那些规矩,对英军斩尽杀绝,在奥尔良之围结束后,英军 5000 人沿着大路向巴黎撤退,贞德命令骑兵火速追击,结果打了英军一个出其不意,几乎将其全歼,几千人的英军对于当时国库将尽的英国是很惨痛的损失(算上强攻奥尔良和其余几场战斗,英军伤亡近万,元气大伤),所以英国人对贞德恨之入骨。</p>
<p>此后受贞德的影响,战争后期的法国将军比如说里奇蒙伯爵,虽然说也是用骑兵为主,但是使用方式已经变得尽可能追求直接歼敌有生力量,而非单纯击溃敌人。例如佛米尼战役中,里奇蒙亲自带领千余骑兵抄英军后路,结果英军全军覆没。于是,英军的新体系对战争形式的转换也使得法军(骑兵)变成了更难缠的对手。</p>
<figure><img class="content-image" src="https://pic1.zhimg.com/v2-79bec6502f12117e4c470a2f23df5a90_720w.jpg?source=8673f162" alt=""></figure>
<figure><img class="content-image" src="https://picx.zhimg.com/v2-3b165d3d66cb5adaeaa82f6812ec3d50_720w.jpg?source=8673f162" alt=""></figure>
<figure><img class="content-image" src="https://picx.zhimg.com/v2-236d9f2fb3db9ebe04ddc0bc79b1051e_720w.jpg?source=8673f162" alt=""><figcaption>法国骑兵破西班牙大方阵战法</figcaption></figure>
</div>
</div><div class="view-more"><a href="https://www.zhihu.com/question/60732762">查看知乎讨论<span class="js-question-holder"></span></a></div></div></div>
</div><script type=“text/javascript”>window.daily=true</script>"

相关文章:

React中渲染html结构---dangerouslySetInnerHTML

dangerouslySetInnerHTML胡子{}语法绑定的内容全部作为普通文本渲染&#xff0c;渲染html结构基于---dangerouslySetInnerHTMLdangerouslySetInnerHTML是React标签的一个属性&#xff0c;类似于vue的v-html有2个{{}},第一个{}代表jsx语法开始&#xff0c;第二个是代表dangerous…...

计网02-计算机网络参考模型

一、OSI七层参考模型 1、分层的思想 分层模型用于网络协议的设计方法&#xff0c;本质是将网络节点间复杂的通信问题分成若干简单的问题逐一解决&#xff0c;通过网络的层次去找问题&#xff0c;将复杂问题简单化。 2、OSI参考模型 由于早期计算机厂商使用的是私有的网络模…...

模块测试:确保软件质量的关键步骤

引言&#xff1a; 在软件开发过程中&#xff0c;模块测试是确保软件质量的关键环节。通过模块化的设计和测试方法&#xff0c;可以提高开发效率、降低错误率&#xff0c;并最终提供稳定可靠的软件产品。本文将介绍模块测试的概念、重要性以及实施步骤&#xff0c;帮助读者了解如…...

Postman接口测试之Postman常用的快捷键

作为一名IT程序猿&#xff0c;不懂一些工具的快捷方式&#xff0c;应该会被鄙视的吧。收集了一些Postman的快捷方式&#xff0c;大家一起动手操作~ 简单操作 xc 请求 操作MAC系统windows系统请求网址 ⌘L Ctrl L 保存请求 ⌘S Ctrl S 保存请求为 ⇧⌘S Ctrl Shift S发送…...

keil自动分配SDRAM空间设置使用

1.修改.sct文件 添加 RW_RAM1 0xC0400000 UNINIT 0x00400000 { ; RW data .ANY (SD_RAM1) 使用 #define LOCATION_ATTRIBUTE(name) __attribute__ ((section(name))) __attribute__ ((aligned(4)))uint8_t sdram_buf[0x100000] __attribute__ ((section("SD_RAM1")…...

TikTok获客怎么做?可以定制一个获客工具!

随着社交媒体的兴起&#xff0c;越来越多的企业开始将目光投向了短视频平台&#xff0c;TikTok作为其中的佼佼者&#xff0c;凭借其独特的算法和内容推荐机制&#xff0c;吸引了大量用户的关注。 那么&#xff0c;如何在TikTok上获取更多的客户呢?本文将为您揭秘TikTok获客的…...

数据结构(Chapter Two -02)—顺序表基本操作实现

在前一部分我们了解线性表和顺序表概念&#xff0c;如果有不清楚可以参考下面的博客&#xff1a; 数据结构(Chapter Two -01)—线性表及顺序表-CSDN博客 首先列出线性表的数据结构&#xff1a; #define MaxSize 50 //定义顺序表最大长度 typedef struct{ElemType data…...

SQL语句整理二--Mysql

文章目录 知识点梳理&#xff1a;1. mysql 中 in 和 exists 区别2. varchar 与 char 的区别 查看表结构&#xff1a;获取当前时间&#xff1a;查看建表语句&#xff1a;修改用户密码&#xff1a;查看所有用户&#xff1a;grant命令&#xff1a;判断当前数据库有多少连接数&…...

oracle与gbase8s迁移数据类型对照

声明&#xff1a;以下为笔者阅读gbase官方文档和oracle官方文档的理解&#xff0c;如有错误&#xff0c;敬请指正。oracle与gbase8s迁移数据类型对照及举例说明 最终结论&#xff1a;oracle与gbase8s数据类型对应关系关于单精度与双精度的区别关于定点与浮点定义的区别精度的定…...

Flink系列之:集合操作

Flink系列之&#xff1a;集合操作 一、集合操作二、UNION三、INTERSECT四、EXCEPT五、IN六、EXISTS 一、集合操作 适用于流、批操作 二、UNION UNION 和 UNION ALL 返回两个表中的数据。 UNION 会去重&#xff0c;UNION ALL 不会去重。 Flink SQL> create view t1(s) as…...

STL:string的常见用法

目录 赋值和连接&#xff1a; operator: 赋值操作符&#xff1a; assign(str): 将字符串赋值为另一个字符串&#xff1a; : 字符串连接操作符&#xff1a; 访问和检查&#xff1a; at(pos): 返回指定位置的字符&#xff0c;提供边界检查。 operator[]: 返回指定位置的字符…...

GBASE南大通用 ADO.NET 中的事务

GBASE南大通用 ADO.NET 中支持事务&#xff0c;可以使用GBASE南大通用Connection 对象的BeginTransaction 函数开始一个事务&#xff0c;并默认使用 ReadCommitted 模式初始化。 事务中可以对单个表执行多个操作&#xff0c;或者对多个表执行多个操作&#xff0c;在事务未提交…...

App(Android)ICP备案号查询——————高仿微信

&#x1f604; 个人主页&#xff1a;✨拉莫帅-CSDN博客✨&#x1f914; 博文&#xff1a;132篇&#x1f525; 原创&#xff1a;130篇&#xff0c;转载&#xff1a;2篇&#x1f525; 总阅读量&#xff1a;388923❤️ 粉丝量&#xff1a;112&#x1f341; 感谢点赞和关注 &#x…...

修改npm源码解决服务端渲染环境中localstorage报错read properties of undefined (reading getItem)

现象&#xff1a; 这个问题是直接指向了我使用的第三方库good-storage&#xff0c;这是一个对localStorage/sessionStorage做了简单封装的库&#xff0c;因为项目代码有一个缓存cache.ts有用到 原因分析&#xff1a; 从表象上看是storage对象找不到getItem方法&#xff0c; 但…...

Educational Codeforces Round 160 (Div. 2) A~C(D,E更新中...)

A.Rating Increase&#xff08;思维&#xff09; 题意&#xff1a; 给出一个仅包含数字的字符串 s s s&#xff0c;要求将该字符串按以下要求分成左右两部分 a , b a,b a,b&#xff1a; 两个数字均不包含前导 0 0 0 两个数字均大于 0 0 0 b > a b > a b>a 如果…...

【Maven-Helper】利用 Maven-Helper 解决依赖冲突问题

【Maven-Helper】利用 Maven-Helper 解决依赖冲突问题 1&#xff09;安装 Maven-Helper 插件2&#xff09;Maven Helper 插件使用方法3&#xff09;Idea-Maven 可视化依赖树 1&#xff09;安装 Maven-Helper 插件 这里我们已经安装过了&#xff0c;如果没有安装过&#xff0c;点…...

C# WPF上位机开发(知识产权ip保护)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 上位机软件如果是和硬件模块搭配开发&#xff0c;这个时候大部分上位机基本上都是白送的&#xff0c;不会收取相关的费用。但是&#xff0c;如果上…...

【Jenkins】Pipeline 语法解析(声明式Pipeline)

文章目录 一、Sections1、agent&#xff08;代理&#xff09;agent 参数值 2、post3、stages&#xff08;阶段&#xff09;4、steps&#xff08;步骤&#xff09; 二、Directives 指令1、environment 环境变量2、options 配置选项可用的选项 options 3、parameters 参数可用的参…...

二叉树的最大深度(LeetCode 104)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一&#xff1a;深度优先搜索GolangC 方法二&#xff1a;广度优先搜索GolangC 参考文献 1.问题描述 给定一个二叉树 root &#xff0c;返回其最大深度。 叉树的「最大深度」是指从根节点到最远叶子节点的最长路径上的节…...

03-数据结构-栈与队列

1.栈 栈和队列是两种操作受限的线性表。如上图所示显示栈的结构 栈&#xff1a;先进后出&#xff0c;入栈&#xff08;数据进入&#xff09; 和出栈&#xff08;数据出去&#xff09;均在栈顶操作。 常见栈的应用场景包括括号问题的求解&#xff0c;表达式的转换和求值&#…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...