Support for JSX Fragment Syntax

TypeScript 2.6.2 adds support for the new <>…</> syntax for fragments in JSX.It is frequently desirable to return multiple children from a component.However, this is invalid, so the usual approach has been to wrap the text in an extra element, such as a <div> or <span> as shown below.

  1. render() {
  2.     return (
  3.         <div>
  4.             Some text.
  5.             <h2>A heading</h2>
  6.             More text.
  7.         </div>
  8.     );
  9. }

To address this pattern, React introduced the React.Fragment component, which provides a dedicated way to wrap such elements without adding an element to the DOM.Correspondingly, the <>…</> syntax was added to JSX to facilitate this new construct. Therefore, the above scenario becomes:

  1. render() {
  2.     return (
  3.         <>
  4.             Some text.
  5.             <h2>A heading</h2>
  6.             More text.
  7.         </>
  8.     );
  9. }

Under —jsx preserve, the new syntax is left untouched for TypeScript emit. Otherwise, for —jsx react, <>…</> is compiled to React.createElement(React.Fragment, null, …), where React.createElement respects —jsxFactory.Note that it is an error to use <>…</> when —jsx react and —jsxFactory are both enabled.

Please refer to the React blog for more details on fragments and the new syntax.