脱离JXS
React
中并不一定要用JSX
,JSX
只是React.createElement(component, props, ...children)
的语法糖,完全可以用原生JS替代
示例:
//JXS
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
// JS
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
如果想了解更多JSX转换JS,可以在这里试验