React. Компоненты

174

15 июля 2021, 17:10

Изучая react наткнулся на интересную с моей точки зрения конструкцию в react-bootstrap:

<Nav 
  activeKey="/home" 
  onSelect={selectedKey => alert(`selected ${selectedKey}`)}> 
  <Nav.Item> 
    <Nav.Link href="/home">Active</Nav.Link> 
  </Nav.Item> 
  <Nav.Item> 
    <Nav.Link eventKey="link-1">Link</Nav.Link> 
  </Nav.Item> 
  <Nav.Item> 
    <Nav.Link eventKey="link-2">Link</Nav.Link> 
  </Nav.Item> 
  <Nav.Item> 
    <Nav.Link eventKey="disabled" disabled> 
      Disabled 
    </Nav.Link> 
  </Nav.Item> 
</Nav>

Что такое Nav.Item, где можно про это почитать?

Answer 1

Это просто способ структурирования кода.

Nav.Item это такой же компонент, как и любой другой обычный компонент React. Но, в данном случае, мы используем namespace для того, что бы точно знать, какой именно компонент используем. Посмотрите сами, Item очень обобщенное имя, поэтому другие библиотеки могут тоже его использовать

import {Item} from 'one-lib';
import {Item} from 'two-lib'; // Oooops. Duplicate name!

Да, можно выкрутиться используя конструкцию as, но это не так красиво)

import {Item} from 'one-lib';
import {Item as ItemTwo} from 'two-lib'; // Ok

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

import {Nav} from 'lib';
Nav.Component1; // Ok!
Nav.Component2; // Ok too!
// В коде либы
export Nav = {
   Component1: ...,
   Component2: ...,
}

При этом Nav сам может являться компонентом, тогда остальные будут статическими св-свами

class Nav extends React.Component {}; // Тут уже используются эта техника - React.Component
Nav.Component1 = class Component1 extends React.Component {}
Nav.Component2 = class Component1 extends React.Component {}
export Nav

Почитать
namespace