Изучая 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, где можно про это почитать?
Это просто способ структурирования кода.
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
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Надо сделать чтобы при клике на один из option, в input вставлялся optioninnerHTML
Мне нужно сделать анимационные линии при наведении на кнопку, от середины нижней линииЛиния должна идти в разные стороны и менять цвет
Я пишу бота на Дискорд, но не могу понять, как сделать прием аргументов, типа пользователь вводит "!отправить коины (кол-во) (uid)"Как получить...