Свойства компонентов в React

Рассмотрим как передовать свойства из компонента в компонет на React.

Самый простой способ, через атрибуты:

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

const MyComponent = props => (
    <div> Привет, {props.name}</div>
);

const MyComponentDop = ({name}) => (
    <div> Привет, {name}</div>
);

function App() {
  return (
    <div className="App">
        <MyComponent name="Сергей"/>
        <MyComponentDop name="Петр"/>
    </div>
  );
}

export default App;

Через содержимое тега

const MyComponent = ({name, children}) => (
    <div>
        Привет, {name}
        {children}
    </div>
);

function App() {
  return (
    <div className="App">
        <MyComponent name="Сергей">
             <p>Как дела, <strong>дружище</strong>?</p>
        </MyComponent>
    </div>
  );
}

Типизация свойств и значения по умолчанию

Для проверки на тип свойств, нам необходимо установить пакет prop-types в наш проект. (Если вы конечно не используете TypeScript)

npm install --save prop-types

Затем подключаем его:

import PropTypes from 'prop-types';

Затем нашему компоненту создаем свойство propTypes и задаем типизацию:

const MyComponent = ({name, age}) => (
    <div>
        Привет, {name} <br/>
        Вам {age} лет!
    </div>
);

// Типизация
MyComponent.propTypes = {
    name: PropTypes.string.isRequired, // Обязательная строка
    age: PropTypes.number, // число
};

// Значения по умолчанию
MyComponent.defaultProps = {
    name: "Незнакомец",
    age: 0,
};

function App() {
  return (
    <div className="App">
        <MyComponent name="Сергей" age={18}/>
    </div>
  );
}