Props — это входные данные, которые компонент получает от родительского компонента. Они являются основным механизмом передачи информации между компонентами в React.
<UserProfile
name="Алексей"
age={30}
isVerified={true}
/>
const userData = {
name: "Мария",
posts: 42,
avatar: "maria.jpg"
};
<UserProfile {...userData} />
function Welcome(props) {
return <h1>Привет, {props.name}!</h1>;
}
// С деструктуризацией:
function Welcome({ name, age }) {
return <h1>Привет, {name}! Тебе {age} лет.</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Привет, {this.props.name}!</h1>;
}
}
<Container>
<Header />
<Content />
</Container>
// В компоненте Container:
function Container({ children }) {
return <div className="container">{children}</div>;
}
function Parent() {
const handleClick = () => console.log('Клик!');
return <Child onClick={handleClick} />;
}
function Child({ onClick }) {
return <button onClick={onClick}>Нажми меня</button>;
}
import PropTypes from 'prop-types';
function User({ name, age }) {
// ...
}
User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
onLogin: PropTypes.func
};
interface UserProps {
name: string;
age?: number; // Необязательное свойство
onLogin: () => void;
}
const User: React.FC<UserProps> = ({ name, age, onLogin }) => {
// ...
};
Не изменяйте props:
Используйте defaultProps для значений по умолчанию:
function Welcome({ name = 'Гость' }) {
return <h1>Привет, {name}!</h1>;
}
// Или:
Welcome.defaultProps = {
name: 'Гость'
};
Избегайте избыточного пробрасывания props (prop drilling):
Props — это:
Основные случаи использования:
Обязательные практики:
Антипаттерны:
Совет: Для сложных приложений комбинируйте props с другими механизмами React (context, state management) для оптимальной архитектуры.