2

编写嵌套特定子组件的组件的惯用 React 方法是什么？我知道如何编写一个简单地包装的组件，props.children例如 React 自己的文档中的这个示例：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

但是，如果我想创建一对可以像这样使用的组件怎么办：

<TabSet>
  <Tab name="Mammals">
     content for <b>warm blooded</b> creatures here
  </Tab>
  <Tab name="Fish">
     content for <b>cold blooded</b> creatures here
  </Tab>
</TabSet>

TabSet这是我（使用reactstrap ）的初始实现，简化以删除样式、选定选项卡管理以及与此问题无关的其他内容。

import React, {Fragment, Component} from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';

export default class TabSet extends Component {

  render(props) { 
    return (
      <Fragment>
        <Nav tabs>
          {props.children.map((tab,i) => 
            <NavItem key={i}>
              <NavLink>
                { tab.name }
              </NavLink>
            </NavItem>
          )}
        </Nav>
        <TabContent>
          {props.children.map((tab,i) => 
            <TabPane key={i} tabId={i}>
              { tab.children }
            </TabPane>
          )}
        </TabContent>
      </Fragment>
    );
  }

}

我卡住的地方是如何实现该Tab组件。从逻辑上讲，它是组件的一部分——TabSet它永远不应该独立存在。它的实现应该非常简单，因为它实际上并没有做任何事情——它只是一个name属性和子元素的容器。

所以，这里有几个问题：

  • 我应该为组件创建一个单独的 JS 文件Tab，还是简单到我应该将它作为TabSet组件实现的一部分导出？如果是后者，怎么做？
  • 在使用 的类中TabSet，我需要两个import语句，还是有一种方法可以同时导入两者TabSet并Tab使用一个import，有点像import React, {Fragment} from 'react'作品？如果是后者，那么导出语句在 TabSet.js 中的外观如何？

为可能是一个显而易见的问题道歉——我是 React 和 ES6 的新手。

4

2 回答 2

1

如果该组件仅在另一个组件的上下文中使用，则将它们放在同一个模块中是合乎逻辑的，并且许多库都这样做。实现这一点的方法是使用多个export不带default. 您可以根据需要使用一个export default或多个export语句。像这样

export default class TabSet 
...
export class Tab

并导入

import TabSet, {Tab} from './Tab'

一般语法是

import defaultExport, { namedExport1, namedExport2  } from "module"

语法可能看起来有点混乱这里是参考

于 2018-04-07T02:20:45.633 回答
0

在您使用的地方，export default class ...您实际上可以在此处导出您自己的对象。考虑到这一点，您可以执行以下操作：

const TabSet = props => (
  <Your Tabset markup here>
)

const Tab = props => (
  <Your Tab markup here>
)

export {
  Tabset,
  Tab
}

这样做将允许您通过以下方式在一行中导入两个组件：

import { Tabset, Tab } from 'wherever'

现在虽然这是一种方法，虽然你认为Tab很简单，但我仍然相信它们属于自己的文件。Tabset因此，只需为and创建两个类文件Tab，然后再创建一个名为tabs.js或其他的第三个文件。它应该包含两者的链接，例如：

import Tabset from './tabset'
import Tab from './tab'

export {
  Tabset,
  Tab
}

这样，您就可以为每个组件指定文件，并且可以将它们作为单个导入导入。

另外为了奖励，如果您使用PropTypes反应能力，您可以限制 的孩子Tabset实际上是您的标签。这是概述，但作为示例，您可以执行以下操作：

// untested
static propTypes = {
  children: PropTypes.arrayOf(PropTypes.instanceOf(Tab))
}

您必须将Tab组件导入到 set 组件中才能执行此操作。

于 2018-04-07T02:19:30.050 回答