Javascript React JS:HTML在屏幕上呈现

它必须是一个超基本的。我想做一个非常第一次的演示，不使用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')
);

const nicolas={
管理员：是的，
id:1，
电子邮件：“xyz@zyx.io",
姓名：“尼古拉斯”，
声明：“星球大战之石”
};
类用户扩展了React.Component{
render（）{
返回React.createElement（'div'，null，
`名称：${this.props.name}
语句：${this.props.statement}`
);
}
}
ReactDOM.render(
React.createElement（用户，nicolas，null），
document.querySelector（'section.app'）
);

因此，

div

标记直接显示。为什么？如何避免这种情况？我必须使用多个叠瓦

React.createElement（）

为什么?

因为您正在将字符串作为子元素传递给元素。字符串按字面意思呈现到文档中。这和你做的一样：

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

{'something'}

在JSX中，这与

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

什么 如何避免这种情况？我必须使用多个叠瓦

React.createElement（）

是的，每个元素都需要使用

React.createElement

创建，但是您应该避免这种情况。

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)
            )
    }
}

)；