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

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

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;

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

• الطريقة الأولى هي استخدام الوسم 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;