ڕێنده‌ركردنی كۆندیشناڵ

له‌ ڕیاكتدا، ده‌توانیت كۆمپۆنێنتێك دروست بكه‌یت كه‌ به‌و جۆره‌ مامه‌ڵه‌ بكات كه‌ تۆ ده‌ته‌وێت. پاشان، ده‌توانیت ته‌نها ئه‌و به‌شه‌ی ڕێنده‌ر بكه‌یت كه‌ خۆت ده‌ته‌وێت، به‌پێی سته‌یتی ئه‌پلیكه‌یشنه‌كه‌ت.

ڕێنده‌ركردنی كۆندیشنال له‌ ڕیاكتدا به‌ هه‌مان جۆری كۆندیشن كارده‌كات كه‌ له‌ جاڤاسجكریپتدا هه‌یه‌. ئۆپێره‌یته‌ره‌كانی جاڤاسكریپت به‌كاربهێنه‌ وه‌ك if یاخود conditional operator بۆ ئه‌وه‌ی هه‌ندێك ئیلیمێنت دروست بكه‌یت به‌ پشت به‌ستن به‌ سته‌یتی ئه‌پلیكه‌یشنه‌كه‌ و پاشان ڕیاكت مالپه‌ڕه‌كه‌ به‌پێی ویستی تۆ ئه‌پده‌یت ده‌كاته‌وه‌.

ته‌ماشای ئه‌و دوو كۆمپۆنێنته‌ بكه‌:

function UserGreeting(props) {
  return <h1>به‌خێربێیته‌وه‌</h1>;
}

function GuestGreeting(props) {
  return <h1>تكایه‌ خۆت ناونووس بكه‌.</h1>;
}

كۆمپۆنێنتی Greeting دروست ده‌كه‌ین كه‌ یه‌كێك له‌و دوو كۆمپۆنێنته‌ی سه‌ره‌وه‌ پیشان ده‌دات به‌ پشت به‌ستن به‌ سته‌یتی ئه‌پلیكه‌یشنه‌كه‌مان:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
ReactDOM.render(
  // تاقیبكه‌ره‌وه‌ بیگۆڕیت بۆ isLoggedIn={true}
  <Greeting isLoggedIn={false} />,  document.getElementById('root'));

له‌ كۆدپێن تاقیبكه‌ره‌وه‌

ئه‌م نموونه‌یه‌ هه‌ر جارك نووسینێكی جیاواز پیشان ده‌دات به‌ پێی نرخی پرۆپی isLoggedIn.

ئیلیمێنته‌كانی ڤاریه‌بڵ

ده‌توانیت ڤاریه‌بڵ به‌كاربهێنیت تاوه‌كه‌ ئیلیمێنتی تیادا هه‌لبگریت. ئه‌مه‌ ده‌توانێت به‌پێی حاڵه‌ته‌كه‌ ڕێنده‌ری به‌شێكی كۆمپۆنێنته‌كه‌ بكات به‌بێ گۆڕینی هیچ به‌شێكی تر.

ته‌ماشای ئه‌و دوو كۆمپۆنێنته‌ بكه‌ كه‌ بۆ دوگمه‌ی Login و Logout به‌كاردێن:

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

له‌م نموونه‌یه‌ی خواره‌وه‌دا، كۆمپۆنێنتی سته‌یتدار درووست ده‌كه‌ین و ناوی ده‌نێین LoginControl.

لێره‌دا یه‌كێك له‌ <LoginButton /> یاخود <LogoutButton /> ڕێنده‌ر ده‌كات، به‌ پێی سته‌یته‌كه‌. هه‌روه‌ها <Greeting /> ڕێنده‌ر ده‌كات كه‌ له‌ نموونه‌كه‌ی پێشووتریشدا به‌كارمان هێنا:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

له‌ كۆدپێن تاقیبكه‌ره‌وه‌

هه‌رچه‌نده‌ شتێكی ئاساییه‌ كه‌ if statement به‌كاربهێنیت بۆ ڕێنده‌ركردنی كۆمپۆنێنته‌كان به‌پێی حاڵه‌ت، به‌ڵام هه‌ندێكجار باشتر وایه‌ سینتاكسی كورتتر به‌كاربهێنیت. چه‌ند ڕێگایه‌ك هه‌یه‌ بۆ نووسینی كۆندیشن به‌ ئینڵاین له‌ JSX دا، له‌ خواره‌وه‌ باسكراوه‌.

If ی ئینڵاین و Logical && Operator

ده‌توانیت هه‌ر ئێكسپرێشنێك بخه‌یته‌ ناو JSX له‌ ڕێگه‌ی خستنییه‌ ناو كه‌وانه‌وه‌. ده‌توانیت ئۆپێره‌یته‌ری && ش به‌كاربهێنیت. ده‌كرێت ئه‌مه‌ سوودێكی زۆری هه‌بێت بۆ به‌كارهێنانی ئیلیمێنتێك به‌ پشت به‌ستن به‌ حاڵه‌تێك.‌

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

له‌ كۆدپێن تاقیبكه‌ره‌وه‌

ئه‌وه‌ی كردمان كارده‌كات له‌به‌رئه‌وه‌ی true && expression هه‌میشه‌ ده‌كاته‌ expression، هه‌روه‌ها false && expression هه‌میشه‌ ده‌كاته‌ false.

له‌به‌رئه‌وه‌، ئه‌گه‌ر كۆندیشنه‌كه‌ true بێت، ئه‌و ئیلیمێنته‌ی ڕاسته‌وخۆ دوای && دێت، پیشان ده‌درێت. به‌ڵام ئه‌گه‌ر false بوو، ڕیاكت تێپه‌ڕی ده‌كات و هیچ ناگۆڕێت

Inline If-Else with Conditional Operator

Another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition ? true : false.

In the example below, we use it to conditionally render a small block of text.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>
  );
}

It can also be used for larger expressions although it is less obvious what’s going on:

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

Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to extract a component.

Preventing Component from Rendering

In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.

In the example below, the <WarningBanner /> is rendered depending on the value of the prop called warn. If the value of the prop is false, then the component does not render:

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

Try it on CodePen

Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods. For instance componentDidUpdate will still be called.