React JS : HTML이 화면에 표시됩니다.

Question

울트라 베이직이어야합니다. JSX를 사용하지 않고 직접적인 데모를 만들고 싶습니다.

const nicolas = { 
    admin: true, 
    id: 1, 
    email: "xyz@zyx.io", 
    name: "Nicolas", 
    statement: "Star Wars rocks" 
}; 

class User extends React.Component { 
    render() { 
     return React.createElement('div', null, 
       `<div>name: ${this.props.name}</div> 
       <div>statement: ${this.props.statement}</div>` 
     ); 
    } 
} 

ReactDOM.render(
     React.createElement(User, nicolas, null), 
     document.querySelector('section.app') 
); 

결과적으로 div 태그가 직접 표시됩니다. 왜 ? 어떻게 피하는가? 나는 여러가 React.createElement()

Answer 1

왜 겹침 사용해야합니다?

문자열을 하위 요소로 요소에 전달하기 때문에. 문자열은 글자 그대로 문서로 렌더링됩니다. 당신이 한 것처럼 같은있어 : JSX에서

<div>{'<span>something</span>'}</div> 

, 어떻게 그것을 방지하기 위해 하지 같은

<div><span>something</span></div> 

로 인? 여러 개의 겹쳐서 표시해야합니다 React.createElement()

예, 모든 요소는 React.createElement으로 만들어야합니다. There is a way to directly set HTML as content of an element,하지만 당신은 그것을 피해야합니다.

Answer 2

React.createElement(root, props, elements) 문자열을 사용할 수 있습니다.

const e = React.createElement; 
class User extends React.Component { 
    render() { 
     return e('div', null, 
      // strong for the whole line 
      e('div', null, 
        e('strong', null, `name: ${this.props.name}`) 
      ), 
      // strong for left part only 
      e('div', null, 
        e('strong', null, 'statement:'), 
        e('span', null, this.props.statement) 
      ) 
    } 
} 

React.createElement Reference; React Without JSX