React JS:HTML在屏幕上呈现
问题描述:
它必须是超基本的。我想做一个第一个演示,而不是使用JSX来更直接。React JS:HTML在屏幕上呈现
const nicolas = {
admin: true,
id: 1,
email: "[email protected]",
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()
答
为什么?
因为您将字符串作为子元素传递给元素。字符串被逐字地渲染到文档中。这是一样的,如果你做的事:
<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,但你应该避免这一点。
答
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)
)
}
}