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

を入り組みましたか？

文字列を子要素として要素に渡すためです。文字列は文字通りドキュメントにレンダリングされます。あなたがやったかのように、それは同じです：

それを回避するための方法

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

と同じないJSX、中

<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