在 React 中使用 jsonified html 作为实际的 html答案

【问题标题】：Use jsonified html as actual html in React在 React 中使用 jsonified html 作为实际的 html
【发布时间】：2019-10-13 08:47:47
【问题描述】：

我正在使用维基百科 API 来调用来自不同搜索的信息。

我是这样称呼它的：

const api = `${proxy}http://en.wikipedia.org/w/api.php?action=parse&format=json&section=0&prop=text&page=${this.state.value}`;

然后当我把它拿回来时，我对 HTML 很感兴趣。我通过了：

jsonObject.parse.text["*"]

然后我想用它来创建维基百科页面的副本。这就是我尝试重新创建维基百科页面的方式：

ReactDOM.render(jsonObject.parse.text["*"], document.getElementById('root'))

它没有按预期工作。谁能解释为什么？结果页面只有一个长字符串。结果是这样的：

<div class="mw-parser-output"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">A four-wheeled motor vehicle used to transport people</div> <div role="note" class="hatnote navigation-not-searchable">For broader coverage of this topic, see <a href="/wiki/Motor_vehicle" title="Motor vehicle">Motor vehicle</a>.</div> <div role="note" class="hatnote navigation-not-searchable">For other uses, see <a href="/wiki/Car_(disambiguation)" class="mw-disambig" title="Car (disambiguation)">Car (disambiguation)</a> and <a href="/wiki/Automobile_(disambiguation)" class="mw-disambig" title="Automobile (disambiguation)">Automobile (disambiguation)</a>.</div> <table class="infobox" style="width:22em"><tbody><tr><th colspan="2" style="text-align:center;font-size:125%;font-weight:bold">Car</th></tr><tr><td colspan="2" style="text-align:center"><a href="/wiki/File:401_Gridlock.jpg" class="image"><img alt="401 Gridlock.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/300px-401_Gridlock.jpg" decoding="async" width="300" height="200" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/450px-401_Gridlock.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/600px-401_Gridlock.jpg 2x" data-file-width="1600" data-file-height="1066" /></a><div>Cars and <a href="/wiki/Truck" title="Truck">trucks</a> driving on <a href="/wiki/Ontario_Highway_401" title="Ontario Highway 401">Highway 401</a> in <a href="/wiki/Ontario" title="Ontario">Ontario</a>, Canada</div></td></tr><tr><th scope="row">Classification</th><td>Vehicle</td></tr><tr><th scope="row">Industry</th><td>Various</td></tr><tr><th scope="row">Application</th><td><a href="/wiki/Transportation" class="mw-redirect" title="Transportation">Transportation</a></td></tr><tr><th scope="row">Fuel source</th><td><a href="/wiki/Gasoline" title="Gasoline">Gasoline</a>, <a href="/wiki/Diesel_fuel" title="Diesel fuel">diesel</a>, <a href="/wiki/Natural_gas" title="Natural gas">natural gas</a>, <a href="/wiki/Electric_car" title="Electric car">electric</a>, <a href="/wiki/Hydrogen" title="Hydrogen">hydrogen</a>, <a href="/wiki/Solar_energy" title="Solar energy">solar</a>, <a href="/wiki/Vegetable_oil" title="Vegetable oil">vegetable oil</a></td></tr><tr><th scope="row">Powered</th><td>Yes</td></tr><tr><th scope="row">Self-propelled</th><td>Yes</td></tr><tr><th scope="row">Wheels</th><td>3–4</td></tr><tr><th scope="row">Axles</th><td>2</td></tr><tr><th scope="row">Inventor</th><td><a href="/wiki/Karl_Benz" title="Karl Benz">Karl Benz</a><a href="#cite_note-stein-1">&#91;1&#93;</a></td></tr></tbody></table> A car (or automobile) is a wheeled <a href="/wiki/Motor_vehicle" title="Motor vehicle">motor vehicle</a> used for <a href="/wiki/Transportation" class="mw-redirect" title="Transportation">transportation</a>. Most definitions of car say they run primarily on roads, seat one to eight people, have four <a href="/wiki/Tyre_(wheel)" class="mw-redirect" title="Tyre (wheel)">tires</a>, and mainly transport people rather than goods.<a href="#cite_note-2">&#91;2&#93;</a><a href="#cite_note-OEDmotrcar-3">&#91;3&#93;</a> Cars came into global use during the 20th century, and <a href="/wiki/Developed_country" title="Developed country">developed economies</a> depend on them. The year 1886 is regarded as the birth year of the modern car when German inventor <a href="/wiki/Karl_Benz" title="Karl Benz">Karl Benz</a> patented his <a href="/wiki/Benz_Patent-Motorwagen" title="Benz Patent-Motorwagen">Benz Patent-Motorwagen</a>. Cars became widely available in the early 20th century. One of the first cars accessible to the masses was the 1908 <a href="/wiki/Ford_Model_T" title="Ford Model T">Model T</a>, an American car manufactured by the <a href="/wiki/Ford_Motor_Company" title="Ford Motor Company">Ford Motor Company</a>. Cars were rapidly adopted in the US, where they replaced <a href="/wiki/Draft_animal" class="mw-redirect" title="Draft animal">animal-drawn</a> <a href="/wiki/Carriage" title="Carriage">carriages</a> and carts, but took much longer to be accepted in Western Europe and other parts of the world.&#91;<a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed">citation needed</a>&#93; Cars have controls for driving, parking, passenger comfort, and a variety of lights. Over the decades, additional features and controls have been added to vehicles, making them progressively more complex, but also more reliable and easier to operate.&#91;<a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed">citation needed</a>&#93; These include rear reversing cameras, <a href="/wiki/Automobile_air_conditioning" title="Automobile air conditioning">air conditioning</a>, <a href="/wiki/Automotive_navigation_system" title="Automotive navigation system">navigation systems</a>, and <a href="/wiki/In-car_entertainment" title="In-car entertainment">in-car entertainment</a>. Most cars in use in the 2010s are propelled by an <a href="/wiki/Internal_combustion_engine" title="Internal combustion engine">internal combustion engine</a>, fueled by the <a href="/wiki/Combustion" title="Combustion">combustion</a> of <a href="/wiki/Fossil_fuel" title="Fossil fuel">fossil fuels</a>. <a href="/wiki/Electric_car" title="Electric car">Electric cars</a>, which were invented early in the <a href="/wiki/History_of_the_automobile" title="History of the automobile">history of the car</a>, became commercially available in the 2000s and have the potential to cost less to buy than gasoline cars in the early 2020s.<a href="#cite_note-4">&#91;4&#93;</a> There are costs and benefits to car use. The costs to the individual include acquiring the vehicle, interest payments (if the car is financed), repairs and <a href="/wiki/Auto_maintenance" class="mw-redirect" title="Auto maintenance">maintenance</a>, fuel, <a href="/wiki/Depreciation" title="Depreciation">depreciation</a>, driving time, <a href="/wiki/Parking_fee" class="mw-redirect" title="Parking fee">parking fees</a>, taxes, and insurance.<a href="#cite_note-racv-5">&#91;5&#93;</a> The costs to society include <a href="/wiki/Maintaining_road" class="mw-redirect" title="Maintaining road">maintaining roads</a>, <a href="/wiki/Land_use" title="Land use">land use</a>, <a href="/wiki/Road_congestion" class="mw-redirect" title="Road congestion">road congestion</a>, <a href="/wiki/Air_pollution" title="Air pollution">air pollution</a>, <a href="/wiki/Public_health" title="Public health">public health</a>, health care, and disposing of the vehicle at the end of its life. <a href="/wiki/Traffic_collisions" class="mw-redirect" title="Traffic collisions">Traffic collisions</a> are the largest cause of injury-related deaths worldwide.<a href="#cite_note-who_stats-6">&#91;6&#93;</a> The personal benefits include on-demand transportation, mobility, independence, and convenience.<a href="#cite_note-setright-7">&#91;7&#93;</a> The societal benefits include economic benefits, such as job and wealth creation from the <a href="/wiki/Automotive_industry" title="Automotive industry">automotive industry</a>, transportation provision, societal well-being from leisure and travel opportunities, and revenue generation from the <a href="/wiki/Category:Vehicle_taxes" title="Category:Vehicle taxes">taxes</a>. People's ability to move flexibly from place to place has far-reaching implications for the nature of societies.<a href="#cite_note-parking-8">&#91;8&#93;</a> There are around 1 billion cars in use worldwide. The numbers are increasing rapidly, especially in <a href="/wiki/Automotive_industry_in_China" title="Automotive industry in China">China</a>, <a href="/wiki/Automotive_industry_in_India" title="Automotive industry in India">India</a> and other <a href="/wiki/Newly_industrialized_country" title="Newly industrialized country">newly industrialized countries</a>.<a href="#cite_note-plunkettresearch.com-9">&#91;9&#93;</a><div class="mw-references-wrap"><ol class="references"> <li id="cite_note-stein-1"><a href="#cite_ref-stein_1-0">^</a> Cite error: The named reference <code>stein</code> was invoked but never defined (see the <a href="/wiki/Help:Cite_errors/Cite_error_references_no_text" title="Help:Cite errors/Cite error references no text">help page</a>). </li> <li id="cite_note-2"><a href="#cite_ref-2">^</a> <cite class="citation book">Fowler, H.W.; Fowler, F.G., eds. (1976). Pocket Oxford Dictionary. Oxford University Press. <a href="/wiki/International_Standard_Book_Number" title="International Standard Book Number">ISBN</a>&#160;<a href="/wiki/Special:BookSources/978-0198611134" title="Special:BookSources/978-0198611134"><bdi>978-0198611134</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Pocket+Oxford+Dictionary&amp;rft.pub=Oxford+University+Press&amp;rft.date=1976&amp;rft.isbn=978-0198611134&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><style data-mw-deduplicate="TemplateStyles:r886058088">.mw-parser-output cite.citation{font-style:inherit}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation .cs1-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Lock-green.svg/9px-Lock-green.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .citation .cs1-lock-limited a,.mw-parser-output .citation .cs1-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Lock-gray-alt-2.svg/9px-Lock-gray-alt-2.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .citation .cs1-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Lock-red-alt-2.svg/9px-Lock-red-alt-2.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .cs1-subscription,.mw-parser-output .cs1-registration{color:#555}.mw-parser-output .cs1-subscription span,.mw-parser-output .cs1-registration span{border-bottom:1px dotted;cursor:help}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/12px-Wikisource-logo.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output code.cs1-code{color:inherit;background:inherit;border:inherit;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;font-size:100%}.mw-parser-output .cs1-visible-error{font-size:100%}.mw-parser-output .cs1-maint{display:none;color:#33aa33;margin-left:0.3em}.mw-parser-output .cs1-subscription,.mw-parser-output .cs1-registration,.mw-parser-output .cs1-format{font-size:95%}.mw-parser-output .cs1-kern-left,.mw-parser-output .cs1-kern-wl-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right,.mw-parser-output .cs1-kern-wl-right{padding-right:0.2em}</style> </li> <li id="cite_note-OEDmotrcar-3"><a href="#cite_ref-OEDmotrcar_3-0">^</a> Cite error: The named reference <code>OEDmotrcar</code> was invoked but never defined (see the <a href="/wiki/Help:Cite_errors/Cite_error_references_no_text" title="Help:Cite errors/Cite error references no text">help page</a>). </li> <li id="cite_note-4"><a href="#cite_ref-4">^</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://cleantechnica.com/2019/08/09/ev-price-parity-coming-soon-claims-vw-executive/">"EV Price Parity Coming Soon, Claims VW Executive"</a>. CleanTechnica. 9 August 2019. Retrieved 10 August 2019.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&amp;rft.genre=unknown&amp;rft.jtitle=CleanTechnica&amp;rft.atitle=EV+Price+Parity+Coming+Soon%2C+Claims+VW+Executive&amp;rft.date=2019-08-09&amp;rft_id=https%3A%2F%2Fcleantechnica.com%2F2019%2F08%2F09%2Fev-price-parity-coming-soon-claims-vw-executive%2F&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/> </li> <li id="cite_note-racv-5"><a href="#cite_ref-racv_5-0">^</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20091007121101/http://www.racv.com.au/wps/wcm/connect/racv/Internet/Primary/my%2Bcar/advice%2B_%2Binformation/vehicle%2Boperating%2Bcosts/">"Car Operating Costs"</a>. RACV. Archived from <a rel="nofollow" class="external text" href="http://www.racv.com.au/wps/wcm/connect/racv/Internet/Primary/my+car/advice+_+information/vehicle+operating+costs/">the original</a> on 7 October 2009. Retrieved 22 December 2009.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=unknown&amp;rft.btitle=Car+Operating+Costs&amp;rft.pub=RACV&amp;rft_id=http%3A%2F%2Fwww.racv.com.au%2Fwps%2Fwcm%2Fconnect%2Fracv%2FInternet%2FPrimary%2Fmy%2Bcar%2Fadvice%2B_%2Binformation%2Fvehicle%2Boperating%2Bcosts%2F&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/> </li> <li id="cite_note-who_stats-6"><a href="#cite_ref-who_stats_6-0">^</a> <cite class="citation book">Peden, Margie; Scurfield, Richard; Sleet, David; Mohan, Dinesh; Hyder, Adnan A.; Jarawan, Eva; Mathers, Colin, eds. (2004). <a rel="nofollow" class="external text" href="http://who.int/violence_injury_prevention/publications/road_traffic/world_report/en/">World report on road traffic injury prevention</a>. World Health Organization. <a href="/wiki/International_Standard_Book_Number" title="International Standard Book Number">ISBN</a>&#160;<a href="/wiki/Special:BookSources/92-4-156260-9" title="Special:BookSources/92-4-156260-9"><bdi>92-4-156260-9</bdi></a>. Retrieved 24 June 2008.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=World+report+on+road+traffic+injury+prevention&amp;rft.pub=World+Health+Organization&amp;rft.date=2004&amp;rft.isbn=92-4-156260-9&amp;rft_id=http%3A%2F%2Fwho.int%2Fviolence_injury_prevention%2Fpublications%2Froad_traffic%2Fworld_report%2Fen%2F&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/> </li> <li id="cite_note-setright-7"><a href="#cite_ref-setright_7-0">^</a> Cite error: The named reference <code>setright</code> was invoked but never defined (see the <a href="/wiki/Help:Cite_errors/Cite_error_references_no_text" title="Help:Cite errors/Cite error references no text">help page</a>). </li> <li id="cite_note-parking-8"><a href="#cite_ref-parking_8-0">^</a> <cite class="citation book">Jakle, John A.; Sculle, Keith A. (2004). Lots of Parking: Land Use in a Car Culture. University of Virginia Press. <a href="/wiki/International_Standard_Book_Number" title="International Standard Book Number">ISBN</a>&#160;<a href="/wiki/Special:BookSources/0-8139-2266-6" title="Special:BookSources/0-8139-2266-6"><bdi>0-8139-2266-6</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Lots+of+Parking%3A+Land+Use+in+a+Car+Culture&amp;rft.pub=University+of+Virginia+Press&amp;rft.date=2004&amp;rft.isbn=0-8139-2266-6&amp;rft.aulast=Jakle&amp;rft.aufirst=John+A.&amp;rft.au=Sculle%2C+Keith+A.&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/> </li> <li id="cite_note-plunkettresearch.com-9"><a href="#cite_ref-plunkettresearch.com_9-0">^</a> <cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110722031051/http://www.plunkettresearch.com/automobiles%20trucks%20market%20research/industry%20overview">"Automobile Industry Introduction"</a>. Plunkett Research. Archived from <a rel="nofollow" class="external text" href="http://www.plunkettresearch.com/Industries/AutomobilesTrucks/AutomobileTrends/tabid/89/Default.aspx">the original</a> on 22 July 2011.</cite><span title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=unknown&amp;rft.btitle=Automobile+Industry+Introduction&amp;rft.pub=Plunkett+Research&amp;rft_id=http%3A%2F%2Fwww.plunkettresearch.com%2FIndustries%2FAutomobilesTrucks%2FAutomobileTrends%2Ftabid%2F89%2FDefault.aspx&amp;rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/> </li> </ol></div>   </div>

【问题讨论】：

标签： javascript html json reactjs

【解决方案1】：

默认情况下，React 会阻止 javascript 插入的 HTML。如果你想解决这个问题，你需要在你的内容的父级上使用 dangerouslySetInnerHTML 属性。

例子：

// data from fetch
let data;

return <div dangerouslySetInnerHTML={data}></div>

执行此操作时，请确保您信任 HTML 源。如果您像这样将用户生成的 HTML 添加到您的网站，您的网站将容易受到 XSS 攻击。

【讨论】：