أستخدام if - else في جملة return داخل مكون React؟

يمكنك أن تستخدم  ternary operator وهي صيغة مبسطة لل if

condition ? true : false 

ولتطبيقها على المثال تكون كالآتي : 
 

render(){
  return(
    <div>
      <h1>{this.props.found ? 'Some Content' : 'Not Found'}</h1>
    </div>
  );
}

يوجد عدة طرق لإنجاز المطلوب مثلا:

تعريف دالة ضمن render ثم استدعائها في التابع return حيث تعيد هذه الدالة المكون المطلوب حسب شرط ما..

// ...

class App extends Component {
  // ...

  render() {
    let {isLoggedIn} = this.state;

    const renderAuthButton = () => {
      if (isLoggedIn) {
        return <button>Logout</button>;
      } else {
        return <button>Login</button>;
      }
    }

    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering in React.
        </h1>
        {renderAuthButton()}
      </div>
    );
  }
}

// ...

أو بطريقة مختصرة باستخدام المعامل الثلاثي:

حيث بعد اختبار الشرط سيتم إضافة المكون المناسب

  render() {
    let { isLoggedIn } = this.state;

    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering in React.
        </h1>
        {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
      </div>
    );
  }
}

أجل يمكنك إستخدام الطريقة التاليه والتي تسمى ternary operator

{this.props.found? <h1>Some Content</h1> : <h1>Not Found<h1/>}

ففي حالة كان هناك props.found

سوف يتم عرض المكون الذي يحوي some content

وإلا فسيتم عرض المكون الذي يحتوي على Not Found

لا يمكنك استخدام if else داخل ال return لكن يمكنك استخدام ternary operator ولحسن الحظ ليس فقط يمكنك استخدامها لتحاكي if else بل ايضا if else if else وذلك عن طريق ربطها كسلسلة متتالية 

import React from 'react';

export default function test() {
  return false ? <h1>1</h1> : false ? <h2>2</h2> : true ? <h3>3</h3> : null;
}

المثال في الأعلى هو نفسه 

if (false) {
  return <h1>1</h1>;
} else if (false) {
  return <h2>2</h2>;
} else if (true) {
  return <h3>3h3</h3>;
} else {
  return null;
}

إذا أردت استخدام return واحدة فقط فالطريقة الوحيدة هي عبر استخدام ternary operator كما شرح الأخوة سابقا

اما إذا أردت استخدام if و else فيجب عليك استخدام أكثر من return واحدة

لكن إذا أردت استخدام nested ternay operator فسيكون الكود غير منظم وصعب القراءة ايضاً لهذا يفضل استخدام if و else لكود أكثر تنظيما وسهل القراءة