Créer une instance d'une Réagir la classe à partir d'une chaîne

J'ai une chaîne de caractères qui contient le nom de la Classe (ce qui est à venir à partir d'un fichier json). Cette chaîne raconte ma Classe de Modèle de mise en page /modèle à utiliser pour les données (également en json). La question est de ma mise en page ne s'affiche pas.

La maison.jsx:

//a template or layout.
var Home = React.createClass({
  render () {
    return (
    <div>Home layout</div>
    )
  }
});

Modèle.jsx:

var Template = React.createClass({
  render: function() {
    var Tag = this.props.template; //this is the name of the class eg. 'Home'
    return (
        <Tag />
    );
  }
});

Je n'ai pas les erreurs mais je ne vois pas la mise en page /la Maison de la Classe. J'ai vérifié les accessoires.modèle et cette des journaux de la bonne info. Aussi, je peux voir la maison de l'élément dans le DOM. Toutefois, il ressemble à ceci:

<div id='template-holder>
    <home></home>
</div>

Si je change de ligne suivante:

var Tag = Home;
//this works but it's not dynamic!

Toutes les idées, comment je peux résoudre ce problème? Je suis sûr que c'est simple de fixer ou je suis en train de faire quelque chose de stupide. De l'aide serait appréciée. Toutes mes excuses si cela a déjà été posée (je n'arrivais pas à le trouver).

Grâce,
Ewan

OriginalL'auteur ewan | 2015-05-11

  1. 11

    Cela ne fonctionnera pas:

    var Home = React.createClass({ ... });

var Component = "Home";
React.render(<Component />, ...);

    Cependant, cette volonté:

    var Home = React.createClass({ ... });

var Component = Home;
React.render(<Component />, ...);

    Donc vous avez simplement besoin de trouver un moyen de la carte entre la chaîne "Home" et la classe de composant Home. Un objet simple et fonctionne comme une base de registre, et vous pouvez construire à partir de là si vous avez besoin de plus de fonctionnalités.

    var components = {
  "Home": Home,
  "Other": OtherComponent
};

var Component = components[this.props.template];
    Merci, j'ai été en espérant pour éviter d'avoir des cartes / les liens dans le code. Je voudrais être en mesure d'ajouter des modèles sans modifier le code source principale de la base. N'est-ce pas possible?
    Vous pourriez construire une sorte de registre mondial et enregistrer chaque composant lorsque celui-ci est créé avec React.createClass (par exemple, en l'enveloppant dans un appel de fonction ou de quelque chose), mais vous aurez certainement besoin d'obtenir des références pour les composants réels.

    OriginalL'auteur Michelle Tilley

  2. 5

    Si vous pouvez vivre avec tous vos composants dans un seul module, alors cela fonctionne sans avoir à le connecter manuellement vos classes à un dictionnaire:

       import * as widgets from 'widgets';
   var Type = widgets[this.props.template];
   ...
   <Type />

    Le générique instruction d'importation est déjà un dictionnaire et le code fonctionne comme le registre dans la réponse précédente.

    En fait, je pense que vous pouvez travailler avec plusieurs modules avec une autre cartographie:

    import * as widgets from 'widgets';
import * as widgets2 from 'widgets2';

const registry = Object.assign({}, widgets, widgets2);
const widget = registry[this.props.template];

    Je serais tout à fait faire cela. En fait, je pense que je suis.

    OriginalL'auteur Robert Moskal

  3. 2

    J'ai eu le même problème et trouvé la solution par moi-même. Je ne sais pas si c'est la "meilleure pratique", mais il fonctionne et je l'utilise actuellement dans ma solution.

    Vous pouvez simplement utiliser le "mal" fonction eval pour créer dynamiquement une instance de réagir composant. Quelque chose comme:

    function createComponent(componentName, props, children){
  var component = React.createElement(eval(componentName), props, children);
  return component;
}

    Ensuite, il suffit d'appeler l'endroit où vous voulez:

    var homeComponent = createComponent('Home', [props], [...children]);

    Si elle répond à vos besoins, vous pouvez peut-être envisager quelque chose comme ça.

    Espère que cela aide.

    Je ne considère pas eval du mal, à moins que l'utilisateur peut saisir ce qu'ils veulent.

    OriginalL'auteur dgpedro

  4. 1

    Lorsque vous utilisez JSX vous pouvez soit rendre les balises HTML (chaînes de caractères) ou de Réagir à des composants (classes).

    Lorsque vous faites var Tag = à la Maison, il fonctionne parce que le JSX compilateur transforme:

    var Template = React.createElement(Tag, {});

    avec la variable de la Balise dans le même champ d'application et d'être Réagir la classe.

        var Tag = Home = React.createClass({
                       render () {
                         return (
                         <div>Home layout</div>
                         )
                       }
                     });

    Lorsque vous ne 

    var Tag = this.props.template; //example: Tag = "aClassName"

    vous faites

    var Template = React.createElement("aClassName", null);

    Mais "aClassName" n'est pas une balise HTML.

    Look ici

    OriginalL'auteur gabrielgiussi

  5. 0

    Je voulais savoir comment faire pour créer Réagir classes dynamiquement à partir d'une spécification JSON chargé à partir d'une base de données et j'ai donc fait quelques tests et tout compris. Mon idée de base était que je voulais définir une Réagir application par le biais d'une interface graphique au lieu de taper le code dans un éditeur de texte.

    Cela est compatible avec Réagissent 16.3.2. Note React.createClass a été déplacée dans son propre module.

    Voici une version condensée des parties essentielles:

    import React from 'react'
import ReactDOMServer from 'react-dom/server'
import createReactClass from 'create-react-class'

const spec = {
  //getDefaultProps
  //getInitialState
  //propTypes: { ... }
  render () {
    return React.createElement('div', null, 'Some text to render')
  }
}
const component = createReactClass(spec)
const factory = React.createFactory(component)
const instance = factory({ /* props */ })
const str = ReactDOMServer.renderToStaticMarkup(instance)
console.log(str)

    Vous pouvez voir un exemple plus complet ici:

    https://github.com/brennancheung/02-dynamic-react/blob/master/src/commands/tests/createClass.test.js

    OriginalL'auteur Brennan Cheung