Comment je peux rendre les composants de réaction sans format jsx?

Question

J'essaie de faire mon composant popup "intelligent", qui peut ouvrir en lui-même quelques composants, mais ma réalisation n'est pas bonne, car ça ne marche pas.

J'utilise l'approche redux pour créer une popup et l'action d'ouvrir mon popup est capable d'obtenir le nom de tout composant pour le rendu avant que la popup ne soit ouverte;

Mais j'ai un problème, après avoir obtenu le paramètre, dans notre cas, il est nameOfComponent, je dois choisir et composant avec le nom rendre nameOfComponent.

Et ma question maintenant, comment peut-il rendre le composant à partir de la matrice?

// He's my components 
import Login from '../Login/login.js'; 
import Logout from '../Logout/logout.js'; 


const popupContent = { 
    Login : Login, 
    logout: Logout 
}; 

// My component 
class Popup extends Component { 

    componentDidUpdate() { 
     // for example 
     const nameOfComponent = "Login"; 

     this.body = this.setBodyPopup(nameOfComponent); 

     return true; 
    } 

    setBodyPopup(property){ 
     return popupContent[property]; 
    } 


    render() { 
     // I want to render some element from popupContent here 
     <div> 
      // <this.body /> // it's jsx format 
      {this.body} 
     </div> 
    } 
} 

Answer 1

Comme commentateurs, vous pouvez spécifier this.body soit dans le constructeur ou dans la méthode render lui-même.

Toutefois, si je comprends bien votre intention, vous pouvez simplement utiliser this.props.children à la place. E.g.

<Popup><MyInnerComponent></Popup> 

et méthode Popup render

render() { 
    <div> 
     {this.props.children} 
    </div> 
} 

Answer 2

React vous permet en fait d'utiliser des variables avec la syntaxe JSX pour instancier les composants. Vous devriez être en mesure d'appeler <this.body /> et de le faire fonctionner; Cependant vôtre ne sera pas parce que vous ne définissez pas this.body jusqu'à la méthode componentDidUpdate, ce qui signifie qu'il sera indéfini pour le premier rendu et tout casser. Je suggère d'utiliser l'état de composant local pour cela au lieu de this.body et de s'assurer qu'il est défini dès le début.

À tout le moins, instancier this.body dans un constructeur à une valeur:

constructor(props) { 
    super(props); 
    this.body = 'Login'; 
} 

Answer 3

Vous pouvez utiliser <this.body /> pour rendre le composant, tant que this.body a une valeur réelle. Peut-être vous avez juste besoin:

render() { 
    return <div> 
     {this.body ? <this.body /> : null} 
    </div> 
} 

Avec l'exemple que vous avez donné, cependant, vous pouvez simplement mettre le contenu de votre componentDidMount au lieu constructor, parce que le constructeur est invoqué avant la première passe de rendu.

Answer 4

Je travaille ici ajouté par exemple JSfiddle ReactJS

Vous ne devez pas utiliser JSX. Si vous le faites, la bonne façon de le faire est d'utiliser l'usine. Vous pouvez également rendre le HTML standard dans la méthode de rendu, ainsi que d'utiliser le javascript vanilla dans votre code en utilisant des accolades.

également pour obtenir Je recommande la cartographie et itérer tous vos articles en tableau et les rendre un par un dans la méthode render

voir exemple ci-dessous:

var Login = React.createClass({ 
 
    render: function() { 
 
    return <div>{this.props.name}, logged in</div>; 
 
    } 
 
}); 
 

 
// React with JSX 
 
ReactDOM.render(<Login name="John" />, 
 
    document.getElementById('containerJSX')); 
 

 
// React without JSX 
 
var Login = React.createFactory(Login); 
 
ReactDOM.render(Login({ name: 'Tim' }), 
 
    document.getElementById('containerNoJSX'));

Answer 5

Je pense que vous regardent quelque chose comme dangerouslySetInnerHtml.

<div dangerouslySetInnerHTML={this.body} />