Когда React видит👀 элемент, представляющий определенный пользователем👤 компонент, он передаёт JSX-атрибуты этому компоненту как единый объект. Мы называем этот объект props.
Необязательно называтьэто свойство объекта, но промышленным стандартом называть его реквизитом.
В функциональном компоненте:
function Comp(props){
return <>
<span>{props.name}</span> // to access the name sent through JSX attribute.
</>
}
//Where it is rendered as
<Comp name="aman"/>
Если вы не передаете значение для свойства, по умолчанию оно равно true.
В компоненте на основе класса
class Comp extends React.Component{
render(){
<>
<span>Hello, {this.props.name}</span>
</>
}
}
//Where it is rendered as
<Comp name="aman"/>
Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои свойства.
Все компоненты React должны вести себя как чистые функции в отношении своих реквизитов.
//Pure Function
function sum(props){
return a+b
}
// Improper Function
function sum(props){
props.a = props.a + props.b
return <></>
}
//Props are read only
Дети👪 в JSX
В выражениях JSX, которые содержат как открывающий тег, так и закрывающий тег, содержимое между этими тегами передается как специальные реквизиты: props.children
Ex: <Student> I am child</Student>
// The content between component is accessible by {props.children}
В следующей статье я напишу о Что такое состояние в React🤔?
Спасибо за подписку и аплодисменты😋
Ссылка на День 8
