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

Пользователь

от keyon.brown , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от raina , год назад

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

Пользователь

от clifford , 10 дней назад

@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 и делают компоненты более гибкими и переиспользуемыми.