We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React JSX nélkül

These docs are old and won’t be updated. Go to react.dev for the new React docs.

Nem kötelező a JSX-et választani, ha Reactet használsz. A React JSX nélkül különösen hasznos, ha nem akarsz külön fordítási lépést létrehozni a build környezetedben.

Minden egyes JSX elem csak egy rövidítés a React.createElement(component, props, ...children) metódus hívására. Így, mindent amit JSX-szel le tudsz írni, meg tudod csinálni JSX nélkül is, sima JavaScriptet használva.

Például, ez a JSX-szet használó kódrészlet:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

átírható a következő, JSX-szet nem használó kódra:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

Próbáld ki az online Babel fordítót, ha szeretnél több példát látni rá, hogyan alakítjuk át a JSXet JavaScriptté.

A komponens megadható sztringként, a React.Component alosztályaként vagy egy sima függvényként.

Ha úgy érzed, hogy túl időigényes mindig kigépelni a React.createElement-et, egy gyakori megoldás, a függvény egy rövidítéshez rendelése:

const e = React.createElement;

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

A React.createElement-nek ezt a rövidített formáját használva, már sokkal kényelmesebb React kódot írni, még JSX nélkül is.

Ha inkább más alternatív megoldást keresel, nézz bele a közösségi projektbe mint amilyen a react-hyperscript és a hyperscript-helpers amik segíthetnek tömörebb kódot írni.

Hasznos volt ez az oldal?Az oldal szerkesztése