Nom des composants React Native avec paramètre de point

Question

Est-il possible de créer un composant personnalisé dans React Native avec des paramètres, ex. : transformateur <PageHeader /> a <Page.Header /> o <PageContent /> a <Page.Content /> .

J'ai vu cette syntaxe avec Picker dans React Native.

<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>

Merci à la communauté :)

Answer 1

Vous écrirez vos composants en exposant les autres composants en tant que static class variables à laquelle vous pouvez accéder à partir de la classe Instance ; par exemple, vous définissez vos composants comme suit

class PageContent extends React.Component {}

class PageHeader extends React.Component {}

et déclarez ensuite votre composant de page comme

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

}

export default Page

Maintenant, si votre importation Page vous pouvez accéder à Header y Content comme <Page.Content/> y <Page.Header/>

Maintenant, si le Page ne fait rien de React, vous pourriez plutôt lui écrire un simple composant class

Answer 2

J'avais l'habitude de faire comme ça :

Pager.js

import React, { Component } from 'react';

export class Pager extends Component {
    ...
}

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

Vous pouvez ensuite l'utiliser dans votre application. Pour le VSCode, il montrera également l'auto complète. Header après Pager. .

app.js

import { Pager } from './Pager';

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