Skip to main content

Значення props за замовчуванням

ReactJunior~1 хв читання
Запропонувати правку

Коротка відповідь

У React можна задати значення props за замовчуванням двома основними способами:

  1. Через деструктуризацію (сучасний і рекомендований спосіб)
  2. Через defaultProps (застарілий, але все ще працює для класів)

1. Сучасний спосіб - через деструктуризацію

Ти просто вказуєш значення за замовчуванням при отриманні props:

javascript
function Greeting({ name = "Гість" }) { return <h1>Привіт, {name}!</h1>; }

Використання:

javascript
<Greeting name="Тім" /> // Привіт, Тім! <Greeting /> // Привіт, Гість!

React підставить "Гість", якщо name не було передано (або undefined).

Працює тільки при відсутності значення - якщо name={null}, значення за замовчуванням не підставиться.

2. Старий спосіб - через defaultProps

Раніше використовувався для класів і функціональних компонентів до появи хуків:

javascript
function Greeting({ name }) { return <h1>Привіт, {name}!</h1>; } Greeting.defaultProps = { name: "Гість", };

Використання:

javascript
<Greeting /> // Привіт, Гість! <Greeting name="Марія" /> // Привіт, Марія!

Починаючи з React 17, defaultProps офіційно не рекомендується для функціональних компонентів - краще використовувати деструктуризацію.

Але він все ще працює для класів:

javascript
class Greeting extends React.Component { static defaultProps = { name: "Гість", }; render() { return <h1>Привіт, {this.props.name}!</h1>; } }

3. Через логічне "АБО" (альтернативний прийом)

Іноді можна задати значення прямо в JSX:

javascript
function Greeting({ name }) { return <h1>Привіт, {name || "Гість"}!</h1>; }

Але цей спосіб підставить "Гість" навіть якщо name = "" або 0, тому не завжди підходить (іноді це небажана поведінка).

4. Комбінований приклад

javascript
function Profile({ name = "Без імені", age = 18, country = "Не вказано" }) { return ( <div> <p>Ім'я: {name}</p> <p>Вік: {age}</p> <p>Країна: {country}</p> </div> ); }

Використання:

javascript
<Profile name="Тім" /> // Ім'я: Тім // Вік: 18 // Країна: Не вказано

Підсумок

СпосібПрикладРекомендується
Через деструктуризаціюfunction Comp({ prop = "default" }) {}Сучасний стандарт
Через defaultPropsComp.defaultProps = { prop: "default" }Тільки для класів
Через ``

Головна думка:

У сучасних React-застосунках краще за все задавати значення props за замовчуванням прямо в деструктуризації параметрів функції:

javascript
function Button({ color = "blue", size = "medium" }) { return <button className={`${color} ${size}`}>Кнопка</button>; }

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку