We want to hear from you!Take our 2020 Community Survey!

Нѳхцѳлд тулгуурласан дүрслэл

React дээр та өөрийн тусгай үйлдэл агуулсан онцгой компонентийг үүсгэж болно. Үүний дараа програмынхаа төлөвөөс хамааруулан дүрсэлж болно.

Нөхцөлд тулгуурласан дүрслэл React дээр Жаваскрипт дээр нөхцөл хэрхэн ажилладаг зарчмаар л ажиллана. Жаваскриптийн if conditional operator ашиглан элэмент үүсгэхдээ одоогийн төлвийг нь тодорхойлж, төлөвт нь тохирсон дэлгэцийн загварыг React-р зуруулж болно.

Дараах хоёр компонент байя:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

Бид Greeting компонент үүсгэн хэрэглэгч нэвтэрсэн эсэхээс нь хамааран дээрх компонентуудыг дүрслэе:

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

CodePen дээр туршина уу

Энэ жишээ нь ялгаатай мэндчилгээ isLoggedIn шинж чанарын утгаас хамааран дүрсэлнэ.

Элемент хувьсагчууд

Та элементийг хадгалахдаа хувьсагч ашиглаж болно. ЭнЭ нь таньд нөхцөлд тулгуурлан компонентийн тодорхой хэсгийг өөрчлөн үлдсэн хэсэг нь өөрчлөгдөхгүй үлдэх боломжийг олгоно.

Нэвтрэх болох Гарах гэсэн товчтой дараах хоёр шинэ компонент байя:

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')
);

CodePen ашиглан туршина уу

Хувьсагч зарлан if илэрхийлэл ашиглан нөхцөлд тулгуурлан компонентоо дүрслэх нь сайн арга ч гэсэн заримдаа та илүү бага синтаксаар бичмээр санагдаж магадгүй. Энэ тохиолдолд JSX дотроо нөхцөл бичих цөөн хэдэн аргууд байдгийг дор тайлбарлав.

Мөр доторхи If нөхцөл болон логик && оператор

Та угалзан хаалт ашиглан ямар ч илэрхийллүүдийг 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')
);

CodePen дээр туршина уу

Жаваскрипт дээр үнэн && илэрхийлэл нь үргэлж илэрхийлэл байдаг ба худал && илэрхийлэл нь үргэлж худал байдаг учир ажиллана.

Тодруулбал, хэрэв нөхцөл нь үнэн байвал && операторын арийн элемент гаралт болон харагдана. Хэрэв нөхцөл худал бол React тоолгүй алгасан өнгөрдөг.

<<<<<<< HEAD

Мөр доторх If-Else нөхцөлт оператортой хамт

======= Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression. In the example below, <div>0</div> will be returned by the render method.

render() {
  const count = 0;  return (
    <div>
      { count && <h1>Messages: {count}</h1>}    </div>
  );
}

Inline If-Else with Conditional Operator

8f7ffa473905148fd5c7ecfd7fed5dabbd261bf0

Өөр нэг нөхцөлд тулгуурлан элемент дүрслэх арга нь Жаваскриптийн нөхцөл оператор нөхцөл ? үнэн: худал ашиглах юм.

Доорх жишээнд бид жижиг хэмжээний текстийг нөхцөл дээр тулгуурлан дүрсэлнэ.

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

Мөн түүнчлэн илүү том илэрхийлэл дээр ашиглагдаж болох ч ойлгоход төвөгтэй болгодог:

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

Яг л Жаваскрипт шиг та болон танай багийхан аль нь илүү уншихад эвтэйхэн байна түүнийгээ сонгох нь таний шийдвэр юм. Мөн нөхцөл нь хэтэрхий төвөгтэй цогц болвол компонент болгон салгах нь илүү сайн сонголт гэдийг санах хэрэгтэй.

Компонентийг дүрслэхээс сэргийлэх

Маш цөөн тохиолдолд та өөрийн компонентоо өөр компонентоор дамжин дүрслэгдсэн байсан ч нуухийг хүсч болох юм. Ингэхийн тулд null утга дүрслэх гаралтынхаа оронд буцаана.

Доорх жишээнд <WarningBanner /> warn нэртэй шинж чанараасаа хамааран дүрслэгдэх юм. Хэрэв шинж чанарын утга худал бол компонент дүрслэгдэхгүй:

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')
);

CodePen дээр туршина уу

null утга render функцээс буцаах нь компонентийг амьдралын циклийн функцээс чөлөөлөн ажиллагаагүй болгоно гэсэн үг биш юм. Үнэндээ componentDidUpdate функц дуудагдсаар л байх болно.

Is this page useful?Edit this page