JSX可不是React的必须品。你要是不想在你的环境中安装编译器,不使用JSX的React的方法超级简单。
所有的JSX只是调用React.createElement(component, props, …children)的语法糖。所以,任何能用JSX的地方都能用普通的JavaScript。
举例,这是用JSX写的:
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
能被编译成不用JSX的代码:
lass 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转换成JavaScript的例子,你可以试试Babel的在线编译器。
组件可以由字符串,或者React.Component的子组件,或者一个无状态函数提供。
如果你需要键入React.createElement很多次,一个常见的模式是赋值给简写:
const e = React.createElement;
ReactDOM.render(
e('div', null, 'Hello World'),
document.getElementById('root')
);
如果你使用 React.createElement 的缩写形式,那么使用没有JSX的React也是挺方便的。
另外,你可以去参考社区上的项目,例如 react-hyperscript 和 hyperscript-helpers 。它们都提供了一些精简的语法。