React中渲染html结构---dangerouslySetInnerHTML

简介: React中渲染html结构---dangerouslySetInnerHTML

dangerouslySetInnerHTML

胡子{}语法绑定的内容全部作为普通文本渲染,渲染html结构基于---dangerouslySetInnerHTML

dangerouslySetInnerHTML是React标签的一个属性,类似于vue的v-html

有2个{{}},第一个{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对。

   <div
        
          className="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>"
目录
相关文章
|
20天前
|
存储 前端开发 数据库
|
20天前
|
前端开发
|
20天前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
20天前
|
存储 前端开发 数据库
|
1月前
|
前端开发 JavaScript 算法
React渲染流程
应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。
22 3
|
18天前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
12 0
|
20天前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
27天前
|
移动开发 HTML5
HTML基本结构标签解析
HTML基本结构标签解析
19 0
|
3天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗