2017-04-24 1 views
1

htl 객체를 에 렌더링하고 싶습니다.. html로 가져 가야합니다. 으로 보내십시오.String으로 처리하여 렌더링하십시오. 계속 진행하는 방법을 모릅니다.임의의 HTML 객체를 문자열로 변환합니다. 반응 js

같은

은 HTML 객체가 될 수있는 모든

<p>Hey man&nbsp;</p> 
<p>nlkansnsa</p> 
<p>as</p> 
<p><strong>asasas</strong></p> 
<p><strong>knla</strong></p> 
<p><br></p> 
<ul> 
    <li><strong>point 1&nbsp;</strong></li> 
    <li><strong>point 2</strong></li> 
    <li><strong>point 3&nbsp;</strong></li> 
</ul> 
<p><br></p> 
dangerouslySetInnerHTML이 같은 html 요소가 포함 문자열 render
+0

당신이 "HTML 개체"가 무슨 뜻인지 명확히 할 수는 당신이 붙여 넣은 것은 대부분 문자열로 표현 될 HTML 문서가 자바 스크립트. HTML을 스트링으로 주면 React에서 이것을 어떻게 표현할 것인가? –

+0

예 응답에서 이것을 렌더링하고 싶습니다. –

+0

이것은 매우 느슨한 질문입니다. 당신은 당신이 가지고있는 특정 문제에 대해 더 정확하게해야하고 일반적인 질문을하지 않아야합니다. 작성한 코드를 포함하고 원하는 방식으로 작업했는지, 원하는 코드가 출력되는 코드를 나타내야합니다. –

답변

1

사용 : 당신은 그 문자열을 포함하는 또한 모든 변수를 전달할 수

<div dangerouslySetInnerHTML={{ __html: "<div>hello</div>" }}></div> 

을, 같은 이 :

let htmlString = "<div>hello</div>"; 

<div dangerouslySetInnerHTML={{ __html: htmlString}}></div> 

DOC을 확인하십시오.

확인이 예 :

let string = "<p>Hey man&nbsp;</p><p>nlkansnsa</p><p>as</p><p><strong>asasas</strong></p><p><strong>knla</strong></p><p><br></p><ul><li><strong>point 1&nbsp;</strong></li><li><strong>point 2</strong></li><li><strong>point 3&nbsp;</strong></li></ul><p><br></p>"; 
 

 
var App =() => { 
 

 
    return(
 
     <div> 
 
     <div dangerouslySetInnerHTML={{ __html: "<div>hello</div>" }}></div> 
 
     <div dangerouslySetInnerHTML={{ __html: string }}></div> 
 
     </div> 
 
    ) 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

+0

고마워 :) 그 작품 –

관련 문제