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标记会直接显示。为什么？以及如何避免这种情况？我必须使用多个imbricated React.createElement()

Answer 1

为什么？

因为您将字符串作为子元素传递给元素。字符串字面上呈现在文档中。这跟你做的一样：

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

JSX中的

，与

相同

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

如何避免？我必须使用多个imbricated 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

React JS：HTML在屏幕上呈现

2 个答案: