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