Question

是否可以使用参数在React Native中创建自定义组件，例如。：将<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，您可以从类Instance中访问它，例如您定义组件，如

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组件没有执行任何React操作，您可以改为将其写为基本class

Answer 2

我曾经这样做过：

Pager.js

import React, { Component } from 'react';

export class Pager extends Component {
    ...
}

Pager.Header = class extends Component {
    ...
}

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

app.js

import { Pager } from './Pager';

<Pager>
    <Pager.Header />
</Pager>

使用point参数React Native组件名称

2 个答案:

Pager.js

app.js