내가 가진 HTML로 구성 어린이 렌더링 나는 그것이 잘 작동 텍스트를 설정 경우, dangerouslySetInnerHtml 반응 수있는 방법 DangerouslySetInnerHTML

Question

반작용,하지만 난 HTML을이 복귀 [개체 개체]

class App extends React.Component{ 
    render(){ 
    return(
     <div dangerouslySetInnerHTML={{__html: this.props.children}}> 

     </div> 
    ) 
    } 
} 

1) ReactDOM.render(
    <App> Test </App>, 
document.getElementById('root')); --- Works 


2) ReactDOM.render(
    <App> <p>Test</p> </App>, 
document.getElementById('root')); --- return [object Object] 

Link to JS Bin

Answer 1

으로 설정 한 경우 주석에서 설명 했으니 __html이 문자열 일 필요가 있기 때문에 에서 생성 된 반응 구성 요소를 전달하기 때문에 출력에 이 출력됩니다.

왜 이렇게하고 싶은지에 대해 아직 명확하지 않지만 문자열을 전달해야하는지 묻는 중 무엇을해야하는지에 대해서는 여전히 불분명합니다.

<App>{"<p>Test</p>"}</App> 

또는

<App children="<p>Test</p>" /> 

모두 동일하고 __html의 값이됩니다 문자열로 마크 업을 통과 :

그래서 당신은 다음 중 하나를 수행 할 수 있습니다.

---

참고!

JSX로 작성된 React 구성 요소가 아닌 일반 HTML에서만 작동합니다! 예를 들어

,이 것 하지 일 :

<App children="<Foo>Test</Foo>" />