初識React(5)：dangerouslySetInnerHTML屬性

VPointer 發(fā)布于2019-08-23 11:28 / 2766人閱讀

摘要：屬性的功能實(shí)際上就是顯示純文本內(nèi)容標(biāo)題名稱這里如果是直接會把標(biāo)簽一起顯示出來，所有這個時候就要用到了，這樣只顯示內(nèi)容不會顯示標(biāo)簽

dangerouslySetInnerHTML屬性的功能實(shí)際上就是顯示純文本內(nèi)容

import React from "react";

class SetHtml extends React.Component {
  constructor(){
    super();
    this.state = {
      content:"標(biāo)題名稱"
    }
  }
   render() {
     return (
       
          
            {this.state.content}
          

          

       
     )
   }
}

export default SetHtml;

這里如果是直接this.state.content會把h1標(biāo)簽一起顯示出來，所有這個時候就要用到dangerouslySetInnerHTML了，這樣只顯示內(nèi)容不會顯示標(biāo)簽

云服務(wù)器 GPU云服務(wù)器 docker初識初識關(guān)系數(shù)據(jù)庫 react _React

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97008.html

相關(guān)文章

React框架實(shí)現(xiàn)移動頁面翻譯是一種什么體驗(yàn)？

摘要：但是可以做到將內(nèi)容中的英文單詞翻譯出來，是怎么實(shí)現(xiàn)的呢一起來看一下吧。處理中的單詞由于傳給我的是一大段內(nèi)容，里面的元素的類型不只一種類名也不止一種，有等等，但是我只處理面積最大的一塊英文，也就是只處理中的英文單詞這就好辦了。單詞翻譯常見于APP中，那么在網(wǎng)頁中對于一段中英混雜的內(nèi)容怎么準(zhǔn)確的做到單詞的翻譯呢？我要渲染的內(nèi)容是一段段的html，用react渲染一段html內(nèi)容是沒有什...

馬永翠 2019-08-30 14:07 評論0 收藏0
React框架實(shí)現(xiàn)移動頁面翻譯是一種什么體驗(yàn)？

摘要：但是可以做到將內(nèi)容中的英文單詞翻譯出來，是怎么實(shí)現(xiàn)的呢一起來看一下吧。處理中的單詞由于傳給我的是一大段內(nèi)容，里面的元素的類型不只一種類名也不止一種，有等等，但是我只處理面積最大的一塊英文，也就是只處理中的英文單詞這就好辦了。單詞翻譯常見于APP中，那么在網(wǎng)頁中對于一段中英混雜的內(nèi)容怎么準(zhǔn)確的做到單詞的翻譯呢？我要渲染的內(nèi)容是一段段的html，用react渲染一段html內(nèi)容是沒有什...

bingo 2019-08-22 15:19 評論0 收藏0
React.js 小書 Lesson23 - dangerouslySetHTML 和 style

摘要：那是因?yàn)樵O(shè)置可能會導(dǎo)致跨站腳本攻擊，所以團(tuán)隊(duì)認(rèn)為把事情搞復(fù)雜可以防止警示大家濫用這個屬性。下一節(jié)中我們將介紹小書和組件參數(shù)驗(yàn)證。 React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson23 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者...

curried 2019-08-21 17:34 評論0 收藏0
React中的小知識點(diǎn)

摘要：配置默認(rèn)和中的操作并不能完全滿足所有操作需求，有些時候還是需要和打交道。當(dāng)中提供了屬性來幫助我們獲取已經(jīng)掛載元素的節(jié)點(diǎn)。當(dāng)元素在頁面上掛載完成以后，就會調(diào)用這個函數(shù)，并且把這個掛載以后的節(jié)點(diǎn)傳給這個函數(shù)。配置默認(rèn) defaultProps class ExampleComponent extends React.Component{ static defaultProps =...

niceforbear 2019-08-20 16:59 評論0 收藏0
【Under-the-hood-ReactJS-Part4】React源碼解讀

摘要：接上文，流程圖子組件掛載我們繼續(xù)探究方法。對于我們的實(shí)例代碼而言，就是標(biāo)簽，所以沒有額外的處理過程。屬性驗(yàn)證緊接著的被調(diào)用的驗(yàn)證方法用于確保被正確設(shè)置，否則，會拋出異常。接上文， React流程圖：https://bogdan-lyashenko.gith... 子組件掛載我們繼續(xù)探究mount方法。如果渲染的標(biāo)簽里有復(fù)雜的html標(biāo)簽，如video，form，textarea等...

evin2016 2019-08-22 18:23 評論0 收藏0