JSX elementu veidošana

Jūs esat novērojis, ka JSX ir neticami daudzpusīgs un var pieņemt JavaScript, HTML un CSS kombināciju. Šajā rakstā jūs uzzināsiet dažas pieejas, kā veidot JSX elementus un darīt to tā, lai lietotnē tiktu sasniegts gan funkcionāls, gan vizuāls aspekts.

Ir dažādi veidi, kā veidot JSX elementus.

Iespējams, vienkāršākais veids, kā to izdarīt, ir izmantot saites HTML elementu faila index.html galvenē, kurā tiks ievietota jūsu React lietotne.

Atribūts href ielādē dažus CSS stilus, iespējams, ar dažām CSS klasēm, un pēc tam funkcijas komponenta deklarācijās varat piekļūt šīm CSS klasēm, izmantojot atribūtu className. (kāpēc tieši “camelCase” stilā un “class name”, nevis “class” kā ierasts? Par to varat uzzināt iepriekšējos šī bloga rakstos par React)

function Promo(props) {
    return (
        <div className="promo-section">
            <div>
                <h1>{props.heading}</h1>
            </div>
            <div>
                <h2>{props.promoSubHeading}</h2>
            </div>
        </div>
    );
}

.promo-section {
    font-weight: bold;
    line-height: 20px;
}

function Promo(props) {
    return (
        <div className="promo-section">
            <div>
                <h1>{props.heading}</h1>
            </div>
            <div>
                <h2>{props.promoSubHeading}</h2>
            </div>
        </div>
    );
}


export default Promo;

function Promo(props) {
    return (
        <div className="promo-section">
            <div>
                <h1 style={{color:"tomāts", fontSize:"40px", fontWeight:"bold"}}>
                    {props.heading}
                </h1>
            </div>
            <div>
                <h2>{props.promoSubHeading}</h2>
            </div>
        </div>
    );
}


export default Promo;

<h1 style={}>

<h1 style={{color:"tomato",fontSize:"40px"}}>

{
    color: "tomāts",
    fontSize: "40px"
}

Tātad šajā objektā nav nekā īpaša, izņemot to, ka esat to iestrādājis un ievietojis figūriekavās. Turklāt, tā kā tas ir tikai JavaScript, tie CSS rekvizīti, kas būtu defisēti vienkāršā CSS, piemēram, font-size:40px, kļūst par camelCased, un vērtība ir virkne, kas izskatās šādi: fontSize:”40px “.

Papildus stila objekta literāla iekļaušanai varat to saglabāt arī mainīgajā un pēc tam izmantot šo mainīgo, nevis nodot objekta literālu.

Tas nodrošina atjauninātu Promo komponentu ar stilu objektu, kas saglabāts kā JavaScript mainīgais:

function Promo(props) {


const styles = {
    color: "tomato",
    fontSize: "40px"
}


return (
        <div className="promo-section">
            <div>
                <h1 style={styles}>
                    {props.heading}
                </h1>
            </div>
            <div>
                <h2>{props.promoSubHeading}</h2>
            </div>
        </div>
    );
}

Izmantojot šo pieeju, jūsu komponenti kļūst autonomāki, jo tiem ir iebūvēti savi stili, taču tas arī padara tos nedaudz grūtāk uzturēt.