Как использовать пропсы-компоненты в 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 будет отображаться три раза с разными именами. Пропсы позволяют компонентам быть гибкими и инкапсулированными, что делает их удобными для повторного использования в приложении.

@keyon.brown 

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

Вот пример того, как использовать пропсы в React.js:

1. Создайте компонент, который будет получать данные через пропсы:

1
2
3

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

1. Создайте родительский компонент и передайте данные через пропсы:

1
2
3
4
5
6
7
8

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

1. Затем отобразите родительский компонент в корневом элементе вашего приложения:

1

ReactDOM.render(<App />, document.getElementById('root'));

В этом примере компонент Greeting получает свойство name через пропсы и отображает приветствие с именем. Родительский компонент App передает разные имена в качестве пропсов для каждого дочернего компонента Greeting.

Пропсы позволяют передавать данные между компонентами в React и делают компоненты более гибкими и переиспользуемыми.