亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用reactjs渲染原始HTML

使用reactjs渲染原始HTML

阿波羅的戰車 2019-12-25 14:18:32
那么這是用reactjs渲染原始html的唯一方法嗎?// http://facebook.github.io/react/docs/tutorial.html// tutorial7.jsvar converter = new Showdown.converter();var Comment = React.createClass({  render: function() {    var rawMarkup = converter.makeHtml(this.props.children.toString());    return (      <div className="comment">        <h2 className="commentAuthor">          {this.props.author}        </h2>        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />      </div>    );  }});我知道有一些很酷的方法來用JSX標記內容,但是我主要感興趣的是能夠呈現原始html(包括所有類,內聯樣式等)。像這樣復雜的事情:<!-- http://getbootstrap.com/components/#dropdowns-example --><div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>  </ul></div>我不想在JSX中重寫所有內容。也許我在想這一切錯。請糾正我。
查看完整描述

3 回答

?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

您可以利用html-to-reactnpm模塊。


注意:我是該模塊的作者,幾小時前剛剛發布了該模塊。請隨時報告任何錯誤或可用性問題。


查看完整回答
反對 回復 2019-12-25
?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

我在快速而骯臟的情況下使用了此方法:


// react render method:


render() {

    return (

      <div>

        { this.props.textOrHtml.indexOf('</') !== -1

            ? (

                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >

                </div>

              )

            : this.props.textOrHtml

          }


      </div>

      )

  }


查看完整回答
反對 回復 2019-12-25
  • 3 回答
  • 0 關注
  • 1095 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號