الطريقة الصحيحة للتعامل مع النمط الشرطي في React

لتنفيذ هذا الأمر عادةً ما نقوم بالتالي:

• الطريقة الأولى هي استخدام الوسم style و إعطائه attribute يسمى jsx بحيث نتمكن من كتابة أكواد javaScript داخل أكواد ال css، و يتم وضع هذا الوسم داخل ال component، لاحظ المثال التالي:

import React from "react";

const Button = props => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        padding: ${"large" in props ? "60" : "20"}px;
        background: ${props.background};
        color: black;
        display: inline-block;
        font-size: 1em;
      }
    `}</style>
  </button>
);

export default function App() {
  return (
    <div>
      <Button large background="orange">
        click me
      </Button>
    </div>
  );
}

• أو يمكنك وضع التنسيقات الخاصة بوضع معين داخل صنف ما و تقوم بكتابة التنسيقات الخاصة به في ملف styleSheet خارجي و بعدها تقوم بالتبديل بين الأصناف حسب الحالة في الملف الخاص بالمكون، لاحظ المثال التالي:

import React, { useEffect, useState } from 'react';
import './Nav.css';

function Nav() {

    const [show, handleShow] = useState(false);

    useEffect(() => {
        window.addEventListener( "scroll", ()=> {
            if (window.scrollY > 100) {
                handleShow(true);
            } else handleShow(false);
        });

        return () => {
            window.removeEventListener("scroll");
        }

    }, []);

    return (
        <div className={` nav ${show && "nav__black"}`}> {/* نقوم بإضافة صنف حسب قيمة الحالة  */}
            <img
                className="nav__logo"
                src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
                alt = "Netflix logo"
            />

           <img
                className="nav__avatar"
                src="https://pbs.twimg.com/profile_images/1240119990411550720/hBEe3tdn_400x400.png"
                alt = "Netflix logo"
            /> 

            
            
        </div>
    )
}

export default Nav;

هذه طريقة جيدة بالفعل ولكن في حالة لم يكن لديك أكثر من تنسيق أو اثنين لكن لو زاد عن هذا تقوم بعمل دالة كالآتي: 
 

import React from 'react';


class App extends React.Component() {

  wrapperStyles = status => {
    const completed = status === 'completed';
	
    return {
      color: completed ? 'green' : 'none',
      backgroundColor: completed ? 'red' : 'aqua',
    }
  };
  
	render() {
    
      return (
        <div style={this.wrapperStyles()}></div>
      );
    }
}

export default App;