{"componentChunkName":"component---src-templates-docs-js","path":"/docs/conditional-rendering.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

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

\n

These new documentation pages teach modern React and include live examples:

\n\n
\n
\n

A React-ben olyan különböző komponenseket készíthetsz, amik különféle viselkedéseket tudnak elkülöníteni, magukba foglalni. Ezután tudsz kimondottan csak néhányat renderelni, az alkalmazás állapotától függően.

\n

A feltételes renderelés React-ben ugyanúgy működik mint ahogy a feltételek működnek JavaScript-ben. Használj JavaScript operátorokat mint az if vagy a feltételes operátor elemek készítéséhez, amik reprezentálják a jelenlegi állapotot, és hagyd hogy a React ennek megfelelően frissítse a felhasználói felületet.

\n

Vedd ezt a két komponenst:

\n
function UserGreeting(props) {\n  return <h1>Üdv újra!</h1>;\n}\n\nfunction GuestGreeting(props) {\n  return <h1>Kérjük, regisztrálj.</h1>;\n}
\n

Készíteni fogunk egy Greeting komponenst, ami ezen komponensek egyikét fogja megjeleníteni attól függően, hogy a felhasználó be van-e jelentkezve:

\n
function Greeting(props) {\n  const isLoggedIn = props.isLoggedIn;\n  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}\nconst root = ReactDOM.createRoot(document.getElementById('root')); \n// Try changing to isLoggedIn={true}:\nroot.render(<Greeting isLoggedIn={false} />);
\n

Próbáld ki a CodePen-en

\n

Ez a példa különféle üdvözléseket renderel az isLoggenIn prop értékétől függően.

\n

Elem változók

\n

Használhatsz változókat elemek tárolására. Ez segít feltételesen renderelni a komponens egy részét, amíg a kimenet többi része nem változik.

\n

Vedd ezt a két komponenst amik Kijelentkezés és Bejelentkezés gombokat képviselnek:

\n
function LoginButton(props) {\n  return (\n    <button onClick={props.onClick}>\n      Bejelentkezés\n    </button>\n  );\n}\n\nfunction LogoutButton(props) {\n  return (\n    <button onClick={props.onClick}>\n      Kijelentkezés\n    </button>\n  );\n}
\n

Az alábbi példában készíteni fogunk egy LoginControl nevű állapot-teljes komponenst.

\n

Ez vagy a <LoginButton />-t vagy pedig a <LogoutButton />-t fogja renderelni a jelenlegi állapotától függően. Valamint renderelni fogja a<Greeting />-et is az előző példából:

\n
class LoginControl extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleLoginClick = this.handleLoginClick.bind(this);\n    this.handleLogoutClick = this.handleLogoutClick.bind(this);\n    this.state = {isLoggedIn: false};\n  }\n\n  handleLoginClick() {\n    this.setState({isLoggedIn: true});\n  }\n\n  handleLogoutClick() {\n    this.setState({isLoggedIn: false});\n  }\n\n  render() {\n    const isLoggedIn = this.state.isLoggedIn;\n    let button;\n    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }\n    return (\n      <div>\n        <Greeting isLoggedIn={isLoggedIn} />        {button}      </div>\n    );\n  }\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')); \nroot.render(<LoginControl />);
\n

Próbáld ki a CodePen-en

\n

Változók deklarálása és if utasítások használata teljesen rendben van egy komponens feltételes renderelése esetén, néha azonban talán szívesen használnál egy rövidebb szintaxist. Az alábbiakban elmagyarázzuk, hogy van néhány módja helyben kifejtett feltételeknek JSX-ben.

\n

Helyben kifejtett if logikai && operátorral

\n

Kapcsos zárójelekkel bármilyen kifejezést JSX-be tudsz ágyazni. Ez magába foglalja a logikai && operátort is. Hasznos lehet ha egy elemet feltételesen szeretnénk mutatni:

\n
function Mailbox(props) {\n  const unreadMessages = props.unreadMessages;\n  return (\n    <div>\n      <h1>Helló!</h1>\n      {unreadMessages.length > 0 &&        <h2>          {unreadMessages.length} olvasatlan üzeneted van.        </h2>      }    </div>\n  );\n}\n\nconst messages = ['React', 'Re: React', 'Re:Re: React'];\n\nconst root = ReactDOM.createRoot(document.getElementById('root')); \nroot.render(<Mailbox unreadMessages={messages} />);
\n

Próbáld ki a CodePen-en

\n

Ez azért működik JavaScript-ben, mert a true && kifejezés mindig a kifejezés-re értékelődik ki, valamint a false && kifejezés pedig mindig false-ra.

\n

Ezért ha a feltétel true, az elem ami && operátor jobb oldalán van, meg fog jelenni a kimenetben. Ha a feltétel false a React figyelmen kívül hagyja az elemet.

\n

Vedd észre, hogy egy falsy kifejezés nem fogja figyelembe venni a && operátor jobb oldalát, hanem a falsy kifejezés értékét adja vissza. Az alábbi példában a render metódus <div>0</div>-t fog visszaadni.

\n
render() {\n  const count = 0;  return (\n    <div>\n      {count && <h1>Üzenetek: {count}</h1>}    </div>\n  );\n}
\n

Helyben kifejtett if-else feltételes operátorral

\n

A helyben kifejtett feltételes renderelés egy másik módja lehet a JavaScript feltételes operátor feltétel ? true : false.

\n

Az alábbi példában ezt használjuk egy kis szövegrészlet feltételes renderelésére.

\n
render() {\n  const isLoggedIn = this.state.isLoggedIn;\n  return (\n    <div>\n      A felhasználó <b>{isLoggedIn ? 'jelenleg be van ' : 'nincs be'}</b>jelentkezve.    </div>\n  );\n}
\n

Használható nagyobb kifejezésekhez is, bár így kevésbé nyilvánvaló mi is történik éppen:

\n
render() {\n  const isLoggedIn = this.state.isLoggedIn;\n  return (\n    <div>\n      {isLoggedIn        ? <LogoutButton onClick={this.handleLogoutClick} />\n        : <LoginButton onClick={this.handleLoginClick} />      }\n    </div>  );\n}
\n

Ugyanúgy ahogy JavaScript-ben, te döntöd el hogy melyik stílust választod attól függően hogy te és a csapatod mit találnak olvashatóbbnak. Valamint emlékezz, ha a feltételek túl összetetté kezdenek válni, talán itt az ideje kivonni egy komponenst.

\n

Komponens renderelésének megelőzése

\n

Ritka esetekben szeretnéd ha a komponensed elrejtené magát akkor is, ha az más komponensek által renderelve lett. Ehhez egyszerűen adj vissza null-t a renderelés kimenetében.

\n

Az alábbi példában a <WarningBanner /> a warn prop értékétől függően van renderelve. Ha a prop értéke false, a komponens nem lesz renderelve:

\n
function WarningBanner(props) {\n  if (!props.warn) {    return null;  }\n  return (\n    <div className=\"warning\">\n      Figyelem!\n    </div>\n  );\n}\n\nclass Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {showWarning: true};\n    this.handleToggleClick = this.handleToggleClick.bind(this);\n  }\n\n  handleToggleClick() {\n    this.setState(state => ({\n      showWarning: !state.showWarning\n    }));\n  }\n\n  render() {\n    return (\n      <div>\n        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>\n          {this.state.showWarning ? 'Elrejtés' : 'Mutatás'}\n        </button>\n      </div>\n    );\n  }\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root')); \nroot.render(<Page />);
\n

Próbáld ki a CodePen-en

\n

Ha a komponens render metódusában null értéket adunk vissza, az nem hat ki a komponens életciklus metódusainak meghívására. Például a componentDidUpdate ebben az esetben is meg lesz hívva.

","frontmatter":{"title":"Feltételes renderelés","next":"lists-and-keys.html","prev":"handling-events.html"},"fields":{"path":"content/docs/conditional-rendering.md","slug":"docs/conditional-rendering.html"}}},"pageContext":{"slug":"docs/conditional-rendering.html"}},"staticQueryHashes":[]}