Как использовать пропсы-компоненты в React.js?

@keyon.brown 

Props (сокращение от "properties") - это объекты, передаваемые компоненту в качестве аргументов. Они представляют собой данные, которые компонент использует для управления своим поведением и отображения. Для использования пропсов в компоненте React, передайте их в качестве аргументов в функцию компонента. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function Hello(props) {
  return Hello, {props.name}!;
}

function App() {
  return (
    
      
      
      
    
  );
}

В данном примере компонент Hello получает свойство name и выводит соответствующее приветствие. Компонент App использует Hello три раза, передавая различные имена в качестве пропсов.

Пропсы также можно использовать при определении компонента как класса. В этом случае они считываются из свойства this.props. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

class Hello extends React.Component {
  render() {
    return Hello, {this.props.name}!;
  }
}

class App extends React.Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}

В обоих случаях результатом будет одинаковый: компонент Hello будет отображаться три раза с разными именами. Пропсы позволяют компонентам быть гибкими и инкапсулированными, что делает их удобными для повторного использования в приложении.