React本机组件名称带有点参数

Question

是否可以在用参数中创建自定义组件，例如。：将<PageHeader />转换为<Page.Header />或<PageContent />到<Page.Content />。

我在React Native中看到了带有Picker组件的语法。

<Picker
  selectedValue={this.state.lang}
  onValueChange={(itemValue, itemIndex) => this.switchLang(itemValue)}
  style={Styles.picker}
>
  <Picker.Item label="EN" value="en-EN" />
  <Picker.Item label="FR" value="fr-FR" />
</Picker>

谢谢您的社区：）

Answer 1

您将写入组件将其他组件曝光为static class variables，您可以从类实例中访问，例如您定义组件，例如

class PageContent extends React.Component {}
class PageHeader extends React.Component {}

然后声明您的页面组件，例如

class Page extends React.Component {
   static Content = PageContent;
   static Header = PageHeader;
}
export default Page

现在，如果您的导入Page，则可以访问Header和Content，例如<Page.Content/>和<Page.Header/>

现在，如果Page组件不做任何反应的事情，则可以写成基本的class

Answer 2

我曾经这样做：

pager.js

import React, { Component } from 'react';
export class Pager extends Component {
    ...
}
Pager.Header = class extends Component {
    ...
}

然后您可以在应用中使用它。对于VSCODE，它还将在Pager.之后显示自动完成Header。

app.js

import { Pager } from './Pager';
<Pager>
    <Pager.Header />
</Pager>