Props в React: основы и примеры

Props (англ. properties) - это объект, который передается дочернему компоненту для использования внутри этого компонента. С помощью props вы можете передавать данные от родительского компонента к дочернему компоненту и использовать эти данные внутри компонента. Props - это свойства компонента, которые можно определить в родительском компоненте и передать в дочерний компонент.

Например, у вас есть родительский компонент App и дочерний компонент Button. Для передачи свойства из родительского компонента в дочерний компонент необходимо использовать атрибуты. В родительском компоненте определим свойство message и передадим его через атрибут в дочерний компонент:

javascript
import React, { Component } from "react";
import Button from "./Button";
class App extends Component {
  render() {
    return (
      

        
      
    );
  }
}
export default App;

В дочернем компоненте Button мы можем использовать props для получения значения message:

javascript
import React, { Component } from "react";
class Button extends Component {
  render() {
    return {this.props.message};
  }
}
export default Button;

Таким образом мы передали свойство message из компонента App в компонент Button и использовали его для отображения на кнопке.

Props также можно использовать для передачи функций-обработчиков:

javascript
import React, { Component } from "react";
import Button from "./Button";
class App extends Component {
  handleClick = () => {
    console.log("Button clicked!");
  };
  render() {
    return (
      

        
      
    );
  }
}
export default App;

Значение props в дочернем компоненте Button:

javascript
import React, { Component } from "react";
class Button extends Component {
  render() {
    const { onClick } = this.props;
    return Click me!;
  }
}
export default Button;

В этом случае мы передали функцию-обработчик handleClick из компонента App в компонент Button и использовали ее для обработки клика на кнопке.

Props могут принимать различные типы данных: строку, число, массив, объект, функцию и т.д. При передаче нескольких свойств через props, они передаются как отдельные атрибуты компонента:

javascript
import React, { Component } from "react";
import Button from "./Button";
class App extends Component {
  handleClick = () => {
    console.log("Button clicked!");
  };
  render() {
    return (
      

        
      
    );
  }
}
export default App;

Значение props в дочернем компоненте Button:

javascript
import React, { Component } from "react";
class Button extends Component {
  render() {
    const { label, disabled, onClick } = this.props;
    return (
      
        {label}
      
    );
  }
}
export default Button;

В этом примере мы передали свойства label, disabled и onClick из компонента App в компонент Button и использовали их для отображения на кнопке с помощью тега-шаблона {label}.