Главная » React & Redux » Свойства React-компонентов (props)

Свойства React-компонентов (props)


31.10.2021, 17:34

У React-компонентов есть свои свойства.

Если мы создадим какой-то компонент, возвращающий вёрстку:

Код

function WhoAmI() {
     return(
         <div>
             <h1>Меня зовут Алексей, фамилия Иванов</h1>
             <a href="http://vk.com">Мой личный сайт</a>
         </div>
     )
}

То этот компонент не будет получать динамических данных, он всего лишь будет возвращать конкретную вёрстку с конкретным содержимым.

Но, если представить тот же компонент в виде заготовки, где в качестве аргумента указать объект props, а в вёрстке использовать фигурные скобки вместо статичных значений, внутри которых и будем использовать свойства, которые возьмём из объекта props:

Код

function WhoAmI(props) {
     return(
         <div>
             <h1>Меня зовут {props.name}, фамилия {props.surname}</h1>
             <a href={props.link}>Мой профиль</a>
         </div>
     )
}

то теперь мы можем динамически передавать эти свойства через объект props, для этого в функции App() используем наш компонент и укажем при этом значения свойств:

Код

function App() {
     return(
         <div className="App">
             <WhoAmI name="Alex" surname="Smith" link="vk.com" />
         </div>
     );
}

Если мы не передаём в виде аргумента объект props (оставляем пустыми скобки), то он всё равно будет сформирован

И теперь, мы можем просто меняя значения передаваемых свойств, многократно использовать наш компонент:

Код

function App() {
     return(
         <div className="App">
             <WhoAmI name="Alex" surname="Smith" link="vk.com" />
             <WhoAmI name="Maria" surname="Stuart" link="mail.ru" />
             <WhoAmI name="John" surname="Kerry" link="google.com" />
         </div>
     );
}

И на странице сайта отрендерится три разных пользователя со своими именем и фамилией, а также ссылкой на личный сайт.

Можно также передавать свойства, сразу деструктурируя объект props:

Код

function WhoAmI({name, surname, link}) {
     return(
         <div>
             <h1>Меня зовут {name}, фамилия {surname}</h1>
             <a href={link}>Мой личный сайт</a>
         </div>
     )
}

Значения атрибутов (свойств), которые мы передаём, не изменяемы, они используются только для чтения, после считывания они отображаются на странице и поменять их нельзя

Чтобы динамически изменить значение пропса, понадобится перерисовать этот компонент, в нашем случае пересоздать эту часть кода:

Код

<WhoAmI name="Alex" surname="Smith" link="vk.com" />

Одно из важных правил React, то что компонент не должен изменять свои пропсы.

Как свойства (пропсы) мы можем передавать всё, что угодно, например, можем передать объект:

Код

function App() {
     return(
         <div className="App">
             <WhoAmI name={{firstName: 'Alex'}} surname="Smith" link="vk.com" />
             <WhoAmI name={{firstName: 'John'}} surname="Stuart" link="mail.ru" />
         </div>
     );
}

Теперь, зная что в props приходит объект со свойством firstName, мы можем его использовать:

Код

function WhoAmI({name, surname, link}) {
     return(
         <div>
             <h1>Меня зовут {name.firstName}, фамилия {surname}</h1>
             <a href={link}>Мой личный сайт</a>
         </div>
     )
}

Как пропсы можно передавать и функции:

Код

function App() {
     return(
         <div className="App">
             <WhoAmI name={() => {return 'Alex'}} surname="Smith" link="vk.com" />
             <WhoAmI name={() => {return 'John'}} surname="Stuart" link="mail.ru" />
         </div>
     );
}

Раз мы в качестве пропса передаём функцию, то в компоненте её нужно вызвать:

Код

function WhoAmI({name, surname, link}) {
     return(
         <div>
             <h1>Меня зовут {name()}, фамилия {surname}</h1>  
             <a href={link}>Мой личный сайт</a>
         </div>
     )
}

Давать имена пропсам следует исходя из того, что они должны иметь смысл с точки зрения компонента, в котором они используются.

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
React-компоненты, props
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)