JSX并不是使用React的一個強制需求。當你不需要在你的構造環境里設置編譯那么不使用JSX會很方便。

每一個JSX元素只是調用React.createElement(componnet, props, ...children)的語法糖。因此，JSX能做的事原生js同樣也做得到。

舉個例子，下面的代碼用JSX：

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被轉變成js，你可以試一試在線Babel編譯器。

組件要么被提供為一個字符串，要么是一個React.Component子類，要么是一個無狀態組件的函數。

如果你已經厭倦了React.createElement方法，一個普通模式是使用簡寫：

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

如果你對React.createElement使用這種簡寫，那么不使用JSX語法也一樣方便。

其它選擇的話，你可以去參考社區上的項目例如react-hyperscript和 hyperscript-helpers 。它們都提供了一些簡潔的語法。

總結

以上是生活随笔為你收集整理的React文档（二十）不使用JSX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。