Question

编写嵌套特定子组件的组件的惯用React方法是什么？我知道如何编写一个简单包装04-07 07:19:27.348 5670-5670/com.example.anandsagar.uapp E/AndroidRuntime: FATAL EXCEPTION: main Process: com.example.anandsagar.uapp, PID: 5670 java.lang.RuntimeException: Unable to start activity ComponentInfo {com.example.anandsagar.uapp/com.example.anandsagar.uapp.MainActivity}: android.view.InflateException: Binary XML file line #39: Error inflating class info.hoang8f.widget.FButton at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665) Caused by: android.view.InflateException: Binary XML file line #39: Binary XML file line #39: Error inflating class info.hoang8f.widget.FButton的组件，就像React自己的文档中的这个例子一样：

props.children

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

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>的初始实现（使用reactstrap），简化了删除样式，选择标签管理以及与此问题无关的其他内容。

TabSet

我遇到的问题是如何实现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有效吗？如果是后者，那么export语句将如何在TabSet.js中查找？

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

Answer 1

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

export default class TabSet 
...
export class Tab

并导入

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

一般语法为

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

语法可能看起来有点令人困惑here is the reference

Answer 2

您使用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和Tab创建两个类文件，然后创建名为tabs.js的第三个文件。它应该包含两者的链接，例如：

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

export {
  Tabset,
  Tab
}

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

同样对于奖励，如果你使用PropTypes反应能力，你可以限制Tabset的孩子实际上是你的选项卡。 Here是概述，但作为示例，您可以执行以下操作：

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

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

用于需要特定包含组件的反应组件的模式

2 个答案: