دوره کامل آموزش ری اکت | نمایش محتوا بر اساس شرط

Displaying Content on a Specific Condition

به اولین قسمت از فصل دوم سری آموزشی کتابخانه React خوش آمدید. در این جلسه به کدهای فصل اول برمی گردیم و از آنجا ادامه خواهیم داد.

اگر کدهای نهایی فصل اول را گم کرده اید می توانید آن ها را از این لینک دانلود کنید.

اگر از جلسات فصل اول به یاد داشته باشید در متد return و درون تابع return سه فرد مختلف را تعریف کرده بودیم:

return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <button 
          style={style}
          onClick={() => this.switchNameHandler('Maximilian!!')}>Switch Name</button>
        <Person 
          name={this.state.persons[0].name} 
          age={this.state.persons[0].age} />
        <Person 
          name={this.state.persons[1].name} 
          age={this.state.persons[1].age}
          click={this.switchNameHandler.bind(this, 'Max!')}
          changed={this.nameChangedHandler} >My Hobbies: Racing</Person>
        <Person 
          name={this.state.persons[2].name} 
          age={this.state.persons[2].age} />
      </div>
    );

از نظر برنامه نویسی این یک لیست است؛ لیستی از افراد مختلف. این افراد را در state کلاس خود نیز می بینیم (جایی که نام هایشان را تعریف کرده ایم) بنابراین از نظر منطقی بهتر است راهی پیدا کنیم تا آن ها را به صورت یک لیست نمایش دهیم.

قبل از اینکه بخواهیم آن را به صورت لیست نمایش دهیم بهتر است ابتدا افراد مختلف را بر اساس شرطی خاص نمایش دهیم. به طور مثال فرض کنید زمانی که روی دکمه switchNameHandler کلیک کردیم نمی خواهیم نام کسی عوض شود بلکه می خواهیم افراد نمایش داده شوند و یا مخفی شوند. برای این کار باید آن ها را درون یک div قرار دهیم تا آن div را به طور کامل مخفی کنیم. بدین صورت افراد داخل div هم مخفی می شوند:

return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <button
          style={style}
          onClick={() => this.switchNameHandler('Maximilian!!')}>Switch Name</button>

        <div>
          <Person
            name={this.state.persons[0].name}
            age={this.state.persons[0].age} />
          <Person
            name={this.state.persons[1].name}
            age={this.state.persons[1].age}
            click={this.switchNameHandler.bind(this, 'Max!')}
            changed={this.nameChangedHandler} >My Hobbies: Racing</Person>
          <Person
            name={this.state.persons[2].name}
            age={this.state.persons[2].age} />
        </div>
      </div>
    );

حالا باید یک متد جدید به جای switchNameHandler تعریف کنیم. من نام togglePersonsHandler را برای آن انتخاب می کنم:

<button
          style={style}
          onClick={this.switchNameHandler()}>Switch Name
</button>

اکنون باید این متد را تعریف کنیم:

  togglePersonsHandler = () => {
    
  }

درون این متد باید کدی بنویسیم که خصوصیت خاصی را toggle (فعال و غیر فعال) کند و بر اساس آن افراد نمایش داده شده یا مخفی شوند. به همین خاطر باید به state برویم و این خصوصیت را تعریف کنیم:

state = {
    persons: [
      { name: 'Max', age: 28 },
      { name: 'Manu', age: 29 },
      { name: 'Stephanie', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false
  }

ویژگی showPersons ویژگی ای است که به state اضافه کرده ایم. شما می توانید هر نامی برایش انتخاب کنید. برای نوشتن جاوا اسکریپت در render می توانیم از curly braces ها استفاده کنیم بنابراین کد person ها را درون curly braces می گذاریم:

        {
          <div>
            <Person
              name={this.state.persons[0].name}
              age={this.state.persons[0].age} />
            <Person
              name={this.state.persons[1].name}
              age={this.state.persons[1].age}
              click={this.switchNameHandler.bind(this, 'Max!')}
              changed={this.nameChangedHandler} >My Hobbies: Racing</Person>
            <Person
              name={this.state.persons[2].name}
              age={this.state.persons[2].age} />
          </div>
        }

متاسفانه نمی توانیم از کدهای بلوکه ای و پیچیده مثل if ها استفاده کنیم. کدهای جاوا اسکریپتی که در این قسمت می نویسیم باید ساده باشند. راه حل استفاده از ternary operator است:

{
          this.state.showPersons ?
          <div>
            <Person
              name={this.state.persons[0].name}
              age={this.state.persons[0].age} />
            <Person
              name={this.state.persons[1].name}
              age={this.state.persons[1].age}
              click={this.switchNameHandler.bind(this, 'Max!')}
              changed={this.nameChangedHandler} >My Hobbies: Racing</Person>
            <Person
              name={this.state.persons[2].name}
              age={this.state.persons[2].age} />
          </div> : null
}

به کد بالا دقت کنید. منطق اپراتور ترنری به این صورت است:

someValue ? dothis : dothat

یعنی اگر someValue صحیح بود اولین مقدار/دستور پس از علامت سوال (dothis) را نمایش/انجام شده و در غیر این صورت مقدار dothat (پس از علامت دونقطه) را نمایش/انجام می شود.

ما از همین روش استفاده کرده ایم و تمام کدهای persons را به جای dothis و null را به جای dothat قرار داده ایم تا اگر مقدار this.state.showPersons برابر true بود افراد نمایش داده شوند و در غیر این صورت مقدار null (پوچ) نمایش داده شود که یعنی چیزی نمایش داده نشود.

البته می توان اپراتور ترنری را به این صورت هم استفاده کرد:

someValue === true ? dothis : dothat

اما از آنجایی که someValue در کدهای ما یا true یا false است نیازی به استفاده از نسخه کامل شرط نیست. با این حال برای راحتی شما من از این حالت استفاده می کنم:

        {this.state.showPersons === true ?
          <div>
            <Person
              name={this.state.persons[0].name}
              age={this.state.persons[0].age} />
            <Person
              name={this.state.persons[1].name}
              age={this.state.persons[1].age}
              click={this.switchNameHandler.bind(this, 'Max!')}
              changed={this.nameChangedHandler} >My Hobbies: Racing</Person>
            <Person
              name={this.state.persons[2].name}
              age={this.state.persons[2].age} />
          </div> : null
        }

حالا می توانیم به togglePersonsHandler برگردیم و کدهایش را تکمیل کنیم:

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({showPersons: !doesShow});
  }

در این کد ابتدا مقدار showPersons را در یک ثابت به نام doesShow قرار داده ایم تا کدنویسی خط بعدی شلوغ نشود. سپس با استفاده از setState مقدار state را تغییر داده ایم؛ در واقع گفته ایم مقدار showPersons برابر با «مخالفِ doesShow» باشد. علامت تعجب در جاوا اسکریپت یعنی «مخالف». بنابراین هر بار که کاربر روی دکمه کلیک بکند، این تابع صدا زده می شود و state را تغییر می دهد.

اگر فایل را ذخیره کرده و به مرورگر برویم می بینید که فقط یک دکمه نمایش داده می شود. در صورتی که دکمه را فشار دهیم افراد نیز به نمایش در می آیند و اگر دوباره روی آن کلیک کنیم افراد محو می شوند.

البته بهتر است نام دکمه را تغییر دهیم:

        <button
          style={style}
          onClick={this.togglePersonsHandler}>Toggle Persons
        </button>

نوشتن کدهای شرطی به این شکل صحیح است اما اگر کدهای JSX شما زیاد باشد خواندن آن ها واقعا سخت می شود به همین خاطر در جلسه بعد با یک روش دیگر برای نوشتن این کدها آشنا خواهید شد.

نمایش محتوا بر اساس شرطی خاص

Displaying Content on a Specific Condition