Как использовать компоненты более высокого порядка в React

Компоненты высшего порядка не являются частью React API. Это шаблон, который вытекает из композиционной природы React. Компонент преобразует свойства в пользовательский интерфейс, а компонент более высокого порядка преобразует компонент в другой компонент. Примерами HOC являются Redux connect и Relay createContainer.

Содержание
  1. Компоненты высшего порядка
  2. Шаг 1. Создайте один проект React.js
  3. Шаг 2: Создайте один новый файл в папке src
  4. Объяснение
  5. Скажем; у нас есть один компонент, который просто перечисляет идентификатор акций и его имя. Итак, сначала мы собираемся создать один компонент StockList.js. //StockList.jsimport React, {Component} из 'react'; импорт TableRow из './TableRow'; класс StockList расширяет Component {constructor (props) {super (props); this.state = {акции: [{id: 1, name: 'TCS'}, {id: 2, name: 'Infosys'}, {id: 3, name: 'Reliance'}]}; } tabRow () {if (this.state.stocks instanceof Array) {возвращает this.state.stocks. map (function (object, i) {return ;})}} render () {return (Название акции Цена акции {this.tabRow ()}); }} экспорт StockList по умолчанию; Теперь, также для создания строк таблицы, мы импортируем еще один компонент под названием «TableRow.js». //TableRow.jsimport React, {Component} из 'react'; класс TableRow расширяет Component {render () {return ({this.props.obj.id} {this.props.obj.name}); }} экспортировать TableRow по умолчанию; Теперь нам нужно включить этот компонент StockList.js в файл App.js . //App.jsimport React, {Component} из 'react'; импорт StockList из './StockList';class App расширяет Component {render () {return ()}} экспортировать приложение по умолчанию; Теперь сохраните файл и перейдите по адресу http://localhost: 3000/. Вы найдете одну таблицу с листингом акций. Хорошо, теперь это первый сценарий. Вторая ситуация в чем-то аналогична первому. Здесь мы перечисляем данные пользователя. Итак, создайте один файл с именем UserList.js внутри папки src. //UserList.jsimport React, {Component } из 'react'; импортировать TableRow из './TableRow';class UserList расширяет компонент {конструктор (реквизиты) {супер (реквизиты); this.state = {пользователи: [{id: 1, name: 'Krunal'}, {id: 2, name: 'Ankit'}, {id: 3, name: 'Rushabh'}]}; } tabRow () {if (this.state.users instanceof Array) {return this.state.users.map (function (object, i) {return ;}) }} render () {return (ID Имя {this.tabRow ()}); }} экспортировать список пользователей по умолчанию; Объяснение В обоих случаях мы делаем одно и то же. Просто отобразите идентификатор и название акций и свойств пользователей. Итак, здесь мы можем создать один компонент высшего порядка и передать оба компонента в качестве аргумента, когда это необходимо. Создайте один файл с именем HOC.js внутри каталога src. //HOC. jsimport React, {Component} из 'react'; экспортировать функцию по умолчанию Hoc (HocComponent, data) {return class extends Component {constructor (props) {super (props); this.state = {данные: данные}; } render () {return (); }}} Приведенный выше файл экспортирует одну функцию по умолчанию, которая возвращает модифицированный Компонент. Эта функция принимает два аргумента. Компонент Данные //StockList.jsimport React, {Component} из 'react'; импорт TableRow из './TableRow'; класс StockList расширяет Component {constructor (props) {super (props) ; } tabRow () {if (this.props.data instanceof Array) {return this.props.data.map (function (object, i) {return ;}) }} render () {return (ID Имя {this.tabRow ()}); }} экспорт StockList по умолчанию; Кроме того, файл UserList.js выглядит так. //UserList.jsimport React, {Component} из 'react'; импортировать TableRow из './TableRow'; class UserList extends Component {constructor (props) {super (props); } tabRow () {if (this.props.data instanceof Array) {return this.props.data.map (function (object, i) {return ;}) }} render () {return (ID Имя {this.tabRow ()}); }} экспортировать список пользователей по умолчанию; Теперь в файле App.js мы вызываем эту компонентную функцию более высокого порядка. //App.jsimport React, {Component} из 'response'; импортировать StockList из './StockList'; импортировать UserList из' ./UserList';import Hoc from './ HOC '; const StocksData = [{id: 1, name:' TCS '}, {id: 2, name:' Infosys '}, {id: 3, name:' Reliance '}]; const UsersData = [{id : 1, name: 'Krunal'}, {id: 2, name: 'Ankit'}, {id: 3, name: 'Rushabh'}]; const Stocks = Hoc (StockList, StocksData); const Users = Hoc ( UserList, UsersData); класс App расширяет Component {render () {return ()}} экспорт приложения по умолчанию; Выше также можно написать в функции render (). В это время будет отрисован компонент «Акции». Заключение Основное использование Компонент высшего порядка предназначен для повышения возможности повторного использования определенных компонентов в нескольких модулях или компонентах. Мы также можем включать в себя различные компоненты, чтобы получить улучшенные компоненты. Большинство сторонних библиотек используют эту функцию для написания еще одной классной библиотеки. Fork Me On Github
  6. Объяснение
  7. Заключение

Компоненты высшего порядка

Компонент высшего порядка — это функция, которая принимает компонент и возвращает новый компонент. Компонент высшего порядка (HOC) — это продвинутая технология в React.js для повторного использования логики компонентов.

Шаг 1. Создайте один проект React.js

 npm install -g create-response-appcreate-react-app my  -appcd my-appnpm start 

Шаг 2: Создайте один новый файл в папке src

//HOC.jsimport React  , {Component} из 'react'; функция экспорта по умолчанию Hoc (HocComponent) {возвращаемый класс расширяет Component {render () {return (
); }}}

Теперь включите эту функцию в файл App.js .

//App.jsimport React, {Component} из 'react'; import Hoc from './HOC';class App extends Component {render () {return (
Руководство по компонентам высшего порядка
)} } App = Hoc (App); экспортировать приложение по умолчанию;

Объяснение

Во-первых, мы создали одну функцию, Hoc внутри файла HOC.js .

Эта функция принимает один аргумент как составная часть. В нашем случае этот компонент — App .

 App = Hoc (App); 

Теперь этот компонент заключен внутри другого React , чтобы мы могли его изменить. Таким образом, это основное применение компонентов высшего порядка .

Скажем; у нас есть один компонент, который просто перечисляет идентификатор акций и его имя.
Итак, сначала мы собираемся создать один компонент StockList.js .

//StockList.jsimport React, {Component} из 'react'; импорт TableRow из './TableRow'; класс StockList расширяет Component {constructor (props) {super (props);  this.state = {акции: [{id: 1, name: 'TCS'}, {id: 2, name: 'Infosys'}, {id: 3, name: 'Reliance'}]};  } tabRow () {if (this.state.stocks instanceof Array) {возвращает this.state.stocks. map (function (object, i) {return ;})}} render () {return (
{this.tabRow ()}
Название акции Цена акции
); }} экспорт StockList по умолчанию;

Теперь, также для создания строк таблицы, мы импортируем еще один компонент под названием «TableRow.js».

//TableRow.jsimport React, {Component} из 'react'; класс TableRow расширяет Component {render () {return (  {this.props.obj.id}   {this.props.obj.name}  );  }} экспортировать TableRow по умолчанию; 

Теперь нам нужно включить этот компонент StockList.js в файл App.js .

//App.jsimport React, {Component} из 'react'; импорт StockList из './StockList';class App расширяет Component {render () {return (
)}} экспортировать приложение по умолчанию;

Теперь сохраните файл и перейдите по адресу http://localhost: 3000/. Вы найдете одну таблицу с листингом акций.

Хорошо, теперь это первый сценарий. Вторая ситуация в чем-то аналогична первому. Здесь мы перечисляем данные пользователя. Итак, создайте один файл с именем UserList.js внутри папки src .

//UserList.jsimport React, {Component  } из 'react'; импортировать TableRow из './TableRow';class UserList расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.state = {пользователи: [{id: 1, name: 'Krunal'}, {id: 2, name: 'Ankit'}, {id: 3, name: 'Rushabh'}]};  } tabRow () {if (this.state.users instanceof Array) {return this.state.users.map (function (object, i) {return ;})  }} render () {return (
{this.tabRow ()}
ID Имя
); }} экспортировать список пользователей по умолчанию;

Объяснение

В обоих случаях мы делаем одно и то же. Просто отобразите идентификатор и название акций и свойств пользователей. Итак, здесь мы можем создать один компонент высшего порядка и передать оба компонента в качестве аргумента, когда это необходимо.

Создайте один файл с именем HOC.js внутри каталога src .

//HOC. jsimport React, {Component} из 'react'; экспортировать функцию по умолчанию Hoc (HocComponent, data) {return class extends Component {constructor (props) {super (props);  this.state = {данные: данные};  } render () {return ();  }}} 

Приведенный выше файл экспортирует одну функцию по умолчанию, которая возвращает модифицированный Компонент . Эта функция принимает два аргумента.

  1. Компонент
  2. Данные
//StockList.jsimport React, {Component} из 'react'; импорт TableRow из './TableRow'; класс StockList расширяет Component {constructor (props) {super (props)  ;  } tabRow () {if (this.props.data instanceof Array) {return this.props.data.map (function (object, i) {return ;})  }} render () {return (
{this.tabRow ()}
ID Имя
); }} экспорт StockList по умолчанию;

Кроме того, файл UserList.js выглядит так.

//UserList.jsimport React,  {Component} из 'react'; импортировать TableRow из './TableRow'; class UserList extends Component {constructor (props) {super (props);  } tabRow () {if (this.props.data instanceof Array) {return this.props.data.map (function (object, i) {return ;})  }} render () {return (
{this.tabRow ()}
ID Имя
); }} экспортировать список пользователей по умолчанию;

Теперь в файле App.js мы вызываем эту компонентную функцию более высокого порядка .

//App.jsimport React, {Component} из 'response'; импортировать StockList из './StockList'; импортировать UserList из' ./UserList';import Hoc from './ HOC '; const StocksData = [{id: 1, name:' TCS '}, {id: 2, name:' Infosys '}, {id: 3, name:' Reliance '}]; const UsersData = [{id  : 1, name: 'Krunal'}, {id: 2, name: 'Ankit'}, {id: 3, name: 'Rushabh'}]; const Stocks = Hoc (StockList, StocksData); const Users = Hoc (  UserList, UsersData); класс App расширяет Component {render () {return (
)}} экспорт приложения по умолчанию;

Выше также можно написать в функции render (). В это время будет отрисован компонент «Акции».

Заключение

Основное использование Компонент высшего порядка предназначен для повышения возможности повторного использования определенных компонентов в нескольких модулях или компонентах. Мы также можем включать в себя различные компоненты, чтобы получить улучшенные компоненты. Большинство сторонних библиотек используют эту функцию для написания еще одной классной библиотеки.

Fork Me On Github

Оцените статью
nanomode.ru
Добавить комментарий