Что такое опора?

Props — это сокращение от свойств, и они используются в приложении React для передачи данных из одного компонента React в другой компонент React. Но будьте осторожны — свойства передают данные только в одностороннем потоке (только от родительских компонентов к дочерним).

При реализации реквизита в приложении React необходимо выполнить 3 шага. Эти:

  1. Определение атрибута и его значения
  2. Передача его дочерним компонентам
  3. Отрисовка данных реквизита

В этом примере два компонента React будут использоваться для иллюстрации реализации props, Parent,

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent someAttribute={value} />    
        );  
    }
}

и дочерний элемент.

//Functional Component
const ChildComponent = (props) => {    
    return <p>{props.someAttribute}</p>; 
};
//Class Component
class ChildComponent extends React.Component {
 render () {
  return(
   return <p>{this.props.someAttribute}</p>;
  )
 }
}

Атрибут определения и данные

Первый шаг выполняется, когда компонент Child вызывается в компоненте Parent, как показано выше. Во время этого вызова атрибут компонента Child определяется "someAttribute" и ему присваивается значение "value":

<ChildComponent someAttribute={value} />

Другим примером этого может быть определение атрибута "message" и присвоение значения"Hello World":

<ChildComponent message={“Hello World”} />

Оба компонента functional и class вызываются таким образом.

Передача данных с использованием реквизита

Подобно тому, как мы передаем аргументы функциям, мы передаем props в дочерний (функциональный) компонент React.

const ChildComponent = (props) => {  
  // statements
};

Однако с компонентами React class свойства передаются на этапе определения, поэтому на этом уровне не требуется никаких дополнительных действий.

Рендеринг реквизитов данных

Props — это объект, которыйсодержит все атрибуты, определенные при вызове ChildComponent. Поскольку мы знаем, что доступ к элементам объекта осуществляется с помощью нотации через точку (.), поэтому мы можем легко отображать данные реквизита:

// Functional Componenet
return <p>{props.someAttribute}</p>;
// Class Componenet
return <p>{this.props.someAttribute}</p>;

Реквизиты — отличный инструмент в распоряжении веб-разработчиков, и понимание того, как работают реквизиты, необходимо для освоения React.