Sebastian N.

present my blog programming

Props w React.js

2019-03-13 SeNBasic-React.js

Props w React.js to jest kolejne kluczowe zagadnienie, które należy znać posługując się tą biblioteką! Tak, więc zaczynajmy!

unsplash.com

Props można określić poprostu atrybutami, osobiście wolę nazywać je pustymi naczyniami, ponieważ pozwalają one wlać (tzn. przekazać), w każdym miejscu aplikacji nową zawartość. Wyjątkową użytecznością props, jest uniwersalność umieszczania dowolnej zawartości.

Jak używać props? Jakie komponenty możemy tworzyć?

Komponenty możemy tworzyć proste i złożone oraz dzielimy na takie, które tworzymy dynamicznie i nie dynamicznie.

Komponent prosty - to taki komponent, który możemy używać uaktualiniając jego atrybut nie dynamicznie, tzn. bardziej manualnie.

import React {Component} from 'react';
import './festival.css';

export default class FestivalColumn extends Component{
    render (){
        const styleImage = {
            width: '100%',
            maxWidth: '600px',
            textAlign: 'center',
            maxHeight: '40vh',
            minHeight: '40vh'
        }
    return (
        <div className="rowFestival">
            <div id="festSection1" onClick={this.props.onClick}>
                <div id="f1" className="columnFestival imagecolumnFestival">
                    <img style={styleImage} src={this.props.fotoStaff1} />  
                </div>
                <div id="f2" className="columnFestival textColumn">
                    <p className="secondSeqTable"> {this.props.firstTitle1}</p>
                    <p className="secondSeqTable"> {this.props.secondTitle1}</p>
                    <p className="secondSeqTableDescirption">{this.props.descriptionTable1}</p>
                </div>
            </div>
        </div>
        )
    }
}

Zaczynajmy! Standardowo dokonujemy import-ów, następnie możemy ale nie musimy tworzyć komponent stylu np. styleImage. Oczywiście umieszczamy props najważniejszy element tego artykułu np. this.props.firstTitle1 lub this.props.fotoStaff1 lub this.props.onClick. Rozpatrując każy z podanych props-ów należy zwrócić uwagę na fakt, że:

  • firstTitle1 umożliwia umieszczenie tekstu (stringu, czyli ciągu znaków),
  • fotoStaff1 jest umieszczony w atrybucie src, co umożliwia wstawienie obiektu w postaci zdjęcia lub filmu,
  • natomiast onClick umieszczony w miejscu przeznaczonym na funkcję pozwala na ustawienie zewnętrznie funkcji, która będzie sterowała czynnością trigerowaną po wciśnięciu funkcji onClick.

Potrzebujemy oczywiście przykładu zaimplementowania tego komponentu, musimy pierw go import-ować oraz inne potrzebne elementy, jak choćby zdjęcia.

import FestivalColumn from '../FestivalComponent/FestivalColumn';
import festival10 from '../FestivalComponent/FestivalImages/fest10.jpg';
import festival11 from '../FestivalComponent/FestivalImages/fest11.jpg';

Następnie musimy go osadzić w komponencie i update-ować atrybuty:

render() {  
    return(
        <div className="contentFestival">
            <div className="contentFestivalColumn">
                <FestivalColumn 
                    onClick={this.handle1Festival}
                    firstTitle1={"I Festiwal Bez Granic - Różany 2010"} 
                    fotoStaff1={festival10}
                />
                <FestivalColumn 
                    onClick={this.handle2Festival}
                    firstTitle1={"II Festiwal Bez Granic - Różanym 2011"}
                    fotoStaff1={festival11} 
                />
            </div>
        </div>
    )
}

W tym miejscu osadziliśmy komponent uprzednio zaimportowany z innego miejsca, następnie update-owaliśmy props-y. Dodaliśmy kolejno uchwyt -> this.handle1Festival umożliwiający trigerowanie funkcji handle1Festival, następnie dodaliśmy tytuł w postaci stringu, tzn ciągu znaków w firstTitle1 i na końcu dodaliśmy obiekt w postaci zdjęcia festival10 w miejscu fotoStaff1. Jak widać zreplikowałem ten komponent wstawiając też inne obiekty. Dzięki czemu wyświetlone zostaną też inne treści na stronie.

Istotne jest to, że aby przypisać nowy stan w komponencie uprzednio utworzonym przez props musimy zastosować słowo kluczowe this, które oznacza referencję do obiektu, który wywoła jego wartość.

W efekcie uzyskamy taki widok: unsplash.com

Komponent złożony - to taki komponent, który umożliwia dynamiczną zmianę poprzez choćby zmianę obiektów (aktualizację, usuwanie, czy dodwanie) do tablicy danych.

const data3 = [
	{
        id: '1',
        name: "Siatkówka"
	},
	{
        id: '2',
        name: "Piłka nożna"
    },
    {
        id: '3',
        name: "Capoeira"
    },
    ... some code
];

Na początek niezbędne będzie utworzenie tablicy danych, tutaj mamy prosty przykład, gdzie w tablicy znajdują się obiekty posiadające id oraz name.

import React from 'react';
import './forAlbum.css';

export default class Albums extends React.Component {
    render () {
        const albums = this.props.albums.map((album, i) => {
            return (
                <div className="thumbik" onClick={this.props.onClick(album)} key={album.id + 1}>
                    <AlbumThumb name={album.name}  id={i} key={i} />
                </div>
            );
        });
        return (
            <div className="thumbContainer">{albums}</div>
        )
    }
}

const AlbumThumb = (props) => (
    <div className="thumb">
        <h3 className="thumbTitle">{props.name}</h3>
    </div>
);

Pora co nie co opowiedzieć o tym komponencie szczegółowo. Otóż przygotowaliśmy w sumie trzy komponenty: pierwszy komponent Albums składający się z dwóch mniejszych AlbumThumb i albums.

  • komponent główny Albums odpowiedzialny jest za export całej zawartości w inne miejsca aplikacji oraz za umożliwienie bezpośredniego montowania tablicy danych, do gotowych atrybutów, tzn. props-ów,
  • komponent AlbumThumb odpowiedzialny jest monotowanie obiektów w postaci stringu (oczywiście tutaj napomknę, że można go wykorzystać tworząc atrybut do montowania obiektów w postaci zdjęć czy filmów), które następnie są przetwarzane,
  • komponent albums to właśnie w nim przetwarzamy tablicę danych korzystając z powyżej wymienionego pojemnika AlbumThumb (z określoną kompozycją wyglądu), do niego też z prawej strony, jak widzimy zostało przypisana właściwość props, dzięki której będziemy mogli montować obiekt name a następnie za pomocą funkcji map utworzona zostanie nowa tablica danych. Po czym wszystko zostanie zwrócone w return () w postaci obiektu albums, do którego podepniemy zewnętrznie tablicę danych.
render (){
    return (
        <div className="contentPages">
            <div style={galleryPhotos}>
                <Albums 
                    albums={data3.filter(
                        categories => categories.dyscyplinary === selectedDyscypilnary.dyscyplinary)} onClick={this.albumClicked
                    } 
                />
            </div>
        </div>
    )
}

Tutaj podpieliśmy pod gotowy komponent Albums tablicę danych data3, oczywiście niezbędna jest też funkcja, która przefiltruje tablicę danych, ale o tym więcej na https://github.com/Scherlock90/ReactMOSPage.

W efekcie uzyskamy taki widok:

unsplash.com

Podsumowując

To, jak utworzysz komponent, czy będzie prosty, złożony, nie dynamiczny, dynamiczny zależy od Ciebie i twoich potrzeb, oczywiście te złożone i dynamiczne pozwalają zaoszczędzić czas i niwelują powtarzalność kodu. Jednakże pamiętaj, że te proste i nie dynamiczne też mogą się przydać, gdy chcemy mieć jeden element a nie trzydzieści. Miłego!