Свойства компонентов в React
4526
Рассмотрим как передовать свойства из компонента в компонет на 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>
);
}
Оставить комментарий