主页 / 问题 / 1021739
Accepted
Егор Гришин
Asked:2020-09-09 19:48:56 +0800 CST2020-09-09 19:48:56 +0800 CST

做出反应。成分

  • 772

在学习 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，我在哪里可以了解它？

javascript

1 个回答

  1. Best Answer

    这只是一种结构化代码的方式。

    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他自己可以是一个组件，那么剩下的就是静态svs了

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

Nav.Component1 = class Component1 extends React.Component {}
Nav.Component2 = class Component1 extends React.Component {}

export Nav

    读
    namespace

    • 2

相关问题