Владислав Калачев

React. Работа с компонентами и props

1 148

Всем доброго времени суток! Сегодня я хочу продолжить тему React и в частности работы с компонентами и их «пропсами». Если тебе интересна данная тема то поехали.

Как рендерится компонент?

Если нам нужно отрендерить какой то компонента до достаточно написать следующие строки.


ReactDOM.render(
  element,
  document.getElementById('root')
);

В качестве element мы можем использовать как обычные элементы DOM


const element = <div>Hello World<div />

так и уже готовые компоненты


const element = <Welcome name=«Hello World» />

Во втором случае React видит что у нас передается компонентом атрибут name через который мы передаем( «прокидываем») нужное нам значение внутрь компонента в виде props объекта { name: «Hello World» }.

Props

Если посмотреть компонент Welcome изнутри, то мы увидем следующий код


class Welcome extends Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}

Данный компонента примет по цепочки с верху в низ props родительского компонента который мы передали через name. И что бы вывести его в Welcome мы вытаскиваем его из props простой записью this.props.name

После того как компонента Welcome отрендерится то мы получим запись Hello World

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

Любой компонент можно использовать нужное нам количество раз. Для этого достаточно сделать import компонента и добавь его при рендеринке. Есть небольшой нюанс. Если у нас имеется несколько компонентов то до версии React 16 нужно было обязательно «обернуть» их в div что бы они отрендерились. В 16 версии такая необходимость уже отпала.


function App() {

  return (

    <div>
      <Welcome name="Text1" />
      <Welcome name="Text2" />
      <Welcome name="Text3" />
    </div>

  );
}

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

Заключение

Сегодня мы рассмотрели базу по работе с компонентами React которая позволит вам из небольших компонентов создавать более сложные и по сути проектировать UI любой сложности, переиспользовать уже готовые компоненты и в дальнейшем «декарировать» их ( об этом я напишу в других моих статья ). Приятно покодить!

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *