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

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 />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

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

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

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

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

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

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

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

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

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