Пропсы в React: передача данных в компоненты с примерами

Пропсы это входные данные компонента React. Родитель передаёт их как атрибуты в JSX, <UserCard name="Ada" online={true} />, а дочерний компонент получает их одним объектом, который обычно деструктурируют прямо в параметрах функции. Пропсы позволяют одному компоненту показывать разные данные при каждом использовании.

function UserCard({ name, role, online }) {
    return (
        <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 10, marginBottom: 8 }}>
            <strong>{name}</strong> <span style={{ color: '#666' }}>{role}</span>
            <div style={{ color: online ? 'green' : '#999' }}>
                {online ? 'Online' : 'Offline'}
            </div>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <UserCard name="Ada Lovelace" role="Engineer" online={true} />
            <UserCard name="Alan Turing" role="Researcher" online={false} />
            <UserCard name="Grace Hopper" role="Admiral" online />
        </div>
    );
}

Один и тот же UserCard рендерит трёх разных людей. Обратите внимание на последнего: атрибут без значения, online, означает online={true}. Добавьте четвёртую карточку со своим именем и ролью.

Передача и чтение пропсов

Строку передавайте в кавычках, а любое другое значение в фигурных скобках: числа, булевы значения, массивы, объекты, функции и даже JSX.

<Product
    title="Desk lamp"
    price={39.5}
    inStock={false}
    tags={['light', 'office']}
    seller={{ name: 'Lumen', rating: 4.8 }}
/>

React собирает все атрибуты в один объект и передаёт его первым аргументом компонента. Можно читать его как props или распаковать нужные поля прямо в списке параметров:

function Product(props) {
    return <h3>{props.title}</h3>;
}

function Product({ title, price, seller }) {
    return <h3>{title}, ${price} from {seller.name}</h3>;
}

Обе версии получают один и тот же объект. Деструктуризация это распространённый стиль, потому что тогда сигнатура функции точно перечисляет, какие пропсы использует компонент.

Значения по умолчанию

Задайте пропсу значение по умолчанию через значение по умолчанию при деструктуризации в JavaScript, = value. Оно применяется, когда родитель не передал пропс или передал undefined. К null, 0, false или '' оно не применяется, это настоящие значения.

function Button({ label = 'Click me', size = 'medium', color = '#2563eb' }) {
    const padding = { small: '2px 8px', medium: '6px 14px', large: '10px 20px' }[size];
    return (
        <button style={{ padding, background: color, color: 'white', border: 0, borderRadius: 6, margin: 4 }}>
            {label} ({String(size)})
        </button>
    );
}

export default function App() {
    return (
        <div>
            <Button />
            <Button label="Save" size="large" />
            <Button label="Undefined" size={undefined} />
            <Button label="Null" size={null} />
        </div>
    );
}

Первые три кнопки берут значения по умолчанию там, где пропс отсутствует или равен undefined. Последняя передаёт null, поэтому size действительно равен null, и поиск не находит отступа. Замените size={null} на size="small", чтобы исправить.

Старый код задаёт значения по умолчанию статическим свойством, Button.defaultProps = { size: 'medium' }. React 19 убрал defaultProps для функциональных компонентов: JSX игнорирует его у функции без всякого предупреждения. В классовых компонентах он всё ещё работает. Используйте значения по умолчанию при деструктуризации.

Передача функций как пропсов

Данные текут вниз: родитель передаёт пропсы детям, а не наоборот. Когда дочернему компоненту нужно сообщить родителю, что что-то произошло, родитель передаёт функцию, а дочерний её вызывает. По соглашению такие пропсы называют onSomething.

import { useState } from 'react';

function Rating({ value, onRate }) {
    return (
        <div>
            {[1, 2, 3, 4, 5].map((n) => (
                <button key={n} onClick={() => onRate(n)} style={{ fontWeight: n === value ? 'bold' : 'normal' }}>
                    {n}
                </button>
            ))}
        </div>
    );
}

export default function App() {
    const [rating, setRating] = useState(0);

    function handleRate(n) {
        console.log('Rating picked a value:', n);
        setRating(n);
    }

    return (
        <div>
            <Rating value={rating} onRate={handleRate} />
            <p>{rating === 0 ? 'Not rated yet' : `You rated it ${rating} out of 5`}</p>
        </div>
    );
}

Rating ничего не хранит. Он показывает полученное value и сообщает о кликах через onRate. Состояние живёт в App, который передаёт его обратно вниз. Передайте onRate={setRating} напрямую вместо handleRate, и всё продолжит работать: сеттер тоже функция. Такой перенос состояния в общего родителя называется подъёмом состояния.

Spread пропсов

Когда у вас уже есть объект, ключи которого совпадают с пропсами компонента, разверните его через {...object} вместо того, чтобы писать каждый атрибут. Синтаксис rest в списке параметров делает обратное: берёт несколько пропсов по имени, собирает всё остальное и передаёт дальше.

function Avatar({ name, color, size }) {
    return (
        <span
            style={{ display: 'inline-grid', placeItems: 'center', width: size, height: size, borderRadius: '50%', background: color, marginInlineEnd: 6 }}
        >
            {name[0]}
        </span>
    );
}

function TextField({ label, ...inputProps }) {
    return (
        <label style={{ display: 'block', marginTop: 10 }}>
            {label} <input {...inputProps} />
        </label>
    );
}

export default function App() {
    const person = { name: 'Ada', color: '#fde68a', size: 40 };

    return (
        <div>
            <Avatar {...person} />
            <Avatar {...person} color="#bbf7d0" />
            <TextField label="Email" type="email" placeholder="you@example.com" maxLength={40} />
        </div>
    );
}

Второй аватар разворачивает person, а затем задаёт color: когда один и тот же пропс встречается дважды, побеждает последний, поэтому переопределения ставьте после spread. TextField оставляет label себе и передаёт type, placeholder и maxLength прямо в <input>. Используйте spread для таких обёрток; в остальных местах явное перечисление пропсов помогает видеть, что получает компонент.

Пропсы доступны только для чтения

Компонент никогда не должен менять собственные пропсы. Они принадлежат родителю, и один и тот же объект может использоваться совместно. Относитесь к ним как к аргументам функции, которые нельзя переприсваивать:

function Counter({ count }) {
    count = count + 1; // wrong: changes a local copy, the parent never sees it
    return <p>{count}</p>;
}

function Profile(props) {
    props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
    return <p>{props.name}</p>;
}

При этом пропсы со временем меняются. Когда родитель снова рендерится с новыми значениями, дочерний компонент получает новый объект пропсов и рендерится с ним:

import { useState } from 'react';

function Temperature({ celsius }) {
    const fahrenheit = (celsius * 9) / 5 + 32;
    return (
        <p>
            {celsius}°C is {fahrenheit}°F, {celsius >= 25 ? 'warm' : 'cool'}.
        </p>
    );
}

export default function App() {
    const [celsius, setCelsius] = useState(20);

    return (
        <div>
            <input type="range" min={-10} max={40} value={celsius} onChange={(e) => setCelsius(Number(e.target.value))} />
            <Temperature celsius={celsius} />
            <button onClick={() => setCelsius(celsius + 5)}>Warmer</button>
        </div>
    );
}

Temperature никогда не меняет celsius. Он вычисляет из него fahrenheit при каждом рендере. Потяните ползунок, и состояние родителя изменится, поэтому дочерний компонент получит новый пропс. Если дочернему компоненту нужно значение, которое он может менять сам, это значение является состоянием, а не пропсом.

Пропсы и состояние

И пропсы, и состояние это обычные значения JavaScript, которые влияют на то, что рендерит компонент, и изменение любого из них снова рендерит компонент. Разница в том, кому принадлежит значение.

Одно и то же значение часто бывает и тем, и другим. В примере с температурой выше celsius это состояние в App и пропс в Temperature. Владелец хранит его как состояние и передаёт вниз как пропс вместе с функцией для его изменения, когда это нужно дочернему компоненту.

Пропс может хранить любое значение, включая JSX и компоненты. Передача элемента, например icon={<StarIcon />}, позволяет родителю заполнить слот в дочернем компоненте, та же идея, что и у children, но с именем на ваш выбор.

Пропс children

Всё, что вы помещаете между открывающим и закрывающим тегами компонента, приходит как пропс с именем children. Так строятся обёртки вроде карточек, панелей и макетов, которые заранее не знают своего содержимого:

function Panel({ title, children }) {
    return (
        <section style={{ border: '1px solid #ddd', borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <h4 style={{ margin: '0 0 8px' }}>{title}</h4>
            {children}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="About">
                <p>Panels can hold any JSX.</p>
            </Panel>
            <Panel title="Links">
                <ul>
                    <li>Props</li>
                    <li>State</li>
                </ul>
            </Panel>
        </div>
    );
}

Страница о children разбирает передачу нескольких слотов и безопасную работу с children.

Ключи не являются пропсами

key выглядит как атрибут, но React оставляет его себе, чтобы сопоставлять элементы списка между рендерами. Компонент его никогда не получает:

function Row(props) {
    console.log('Row props.key =', String(props.key), 'props.id =', props.id);
    return <li>{props.label}</li>;
}

export default function App() {
    const fruits = [
        { id: 'a1', label: 'Apple' },
        { id: 'b2', label: 'Banana' },
    ];

    return (
        <ul>
            {fruits.map((fruit) => (
                <Row key={fruit.id} id={fruit.id} label={fruit.label} />
            ))}
        </ul>
    );
}

Консоль показывает props.key как undefined, а props.id с настоящим значением. Когда дочернему компоненту нужен идентификатор, передайте его второй раз под другим именем, как здесь делает id. Сборка для разработки также предупреждает, когда вы читаете props.key; превью работает как продакшен-сборка, поэтому вы видите только undefined.