?
This document uses PHP Chinese website manual Release
JSX不是使用React的必要條件。如果您不想在編譯環(huán)境中設(shè)置編譯,在不使用JSX的情況下使用React特別方便。
每個(gè)JSX元素都只是調(diào)用的語(yǔ)法糖React.createElement(component, props, ...children)
。所以,任何你能用JSX做的事情都可以用普通的JavaScript來(lái)完成。
例如,用JSX編寫(xiě)的這段代碼:
class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; } } ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root') );
可以編譯為不使用JSX的代碼:
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如何轉(zhuǎn)換為JavaScript的示例,則可以嘗試使用聯(lián)機(jī)的Babel編譯器。
組件既可以作為字符串提供,也可以作為子類提供,也可以作為React.Component
無(wú)狀態(tài)組件的普通函數(shù)提供。
如果你厭倦了打字React.createElement
太多,一種常見(jiàn)的模式是分配一個(gè)簡(jiǎn)寫(xiě):
const e = React.createElement;ReactDOM.render( e('div', null, 'Hello World'), document.getElementById('root'));
如果你使用這種簡(jiǎn)寫(xiě)形式React.createElement
,在不使用JSX的情況下使用React幾乎可以方便。
或者,你可以參考社區(qū)項(xiàng)目,如react-hyperscript
和hyperscript-helpers
其提供了一個(gè)更簡(jiǎn)潔的語(yǔ)法。