Il devrait y avoir un conteneur qui mappe les noms des composants à tous les composants censés être utilisés de manière dynamique. Les classes de composants doivent être enregistrées dans un conteneur car dans un environnement modulaire, il n'y a pas d'autre endroit unique où ils pourraient être accédés. Les classes de composants ne peuvent pas être identifiées par leurs noms sans les spécifier explicitement car la fonctionname
est réduite en production.
Carte des composants
Cela peut être un objet simple:
class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
Ou Map
exemple:
const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);
L'objet simple est plus approprié car il bénéficie de la sténographie de propriété.
Module baril
Un module baril avec des exportations nommées peut agir comme une telle carte:
// Foo.js
export class Foo extends React.Component { ... }
// dynamic-components.js
export * from './Foo';
export * from './Bar';
// some module that uses dynamic component
import * as componentsMap from './dynamic-components';
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
Cela fonctionne bien avec une classe par style de code de module.
Décorateur
Les décorateurs peuvent être utilisés avec des composants de classe pour le sucre syntaxique, cela nécessite toujours de spécifier les noms de classe explicitement et de les enregistrer dans une carte:
const componentsMap = {};
function dynamic(Component) {
if (!Component.displayName)
throw new Error('no name');
componentsMap[Component.displayName] = Component;
return Component;
}
...
@dynamic
class Foo extends React.Component {
static displayName = 'Foo'
...
}
Un décorateur peut être utilisé comme composant d'ordre supérieur avec des composants fonctionnels:
const Bar = props => ...;
Bar.displayName = 'Bar';
export default dynamic(Bar);
L'utilisation de propriétés non standarddisplayName
au lieu de propriétés aléatoires profite également au débogage.
{...this.props}
utile de transmettre de manière transparente les accessoires aux composants sous-typés du parent. Likereturn <MyComponent {...this.props} />