Wie kann ich reagieren Komponenten ohne Jsx-Format?

Question

Ich versuche, meine "intelligente" Popup-Komponente zu machen, die in sich einige Komponenten öffnen kann, aber meine Umsetzung ist nicht gut, weil es nicht funktioniert.

Ich benutze Redux-Ansatz zum Erstellen von Popup und Aktion des Öffnens meines Popup ist in der Lage, Name einer Komponente für das Rendern zu erhalten, bevor Popup geöffnet wird;

Aber ich habe ein Problem, nachdem Parameter immer, in unserem Fall ist es nameOfComponent, ich brauche Komponente zu wählen und machte mit dem Namen nameOfComponent.

Und meine Frage jetzt, wie kann es Komponente aus Array zu rendern?

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

Als Kommentatoren vorschlagen, möchten Sie vielleicht this.body angeben, entweder im Konstruktor oder in der Render-Methode selbst.

Wenn ich jedoch Ihre Absicht richtig verstehe, können Sie stattdessen this.props.children verwenden. Zum Beispiel

<Popup><MyInnerComponent></Popup> 

und in Popup render Methode

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

Answer 2

Reagieren tatsächlich können Sie Variablen mit JSX Syntax verwenden Komponenten zu instanziiert. Sie sollten tatsächlich in der Lage sein, <this.body /> aufzurufen und es funktionieren zu lassen; aber werden Sie nicht, weil Sie this.body bis componentDidUpdate Methode nicht definieren, was bedeutet, dass es für den ersten Render undefiniert sein wird und alles zu brechen. Ich würde vorschlagen, anstelle von this.body den lokalen Komponentenstatus dafür zu verwenden und sicherzustellen, dass es von Anfang an definiert ist.

Am allerwenigsten, instanziiert this.body in einem Konstruktor zu einem gewissen Wert:

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

Answer 3

Sie <this.body /> die Komponente machen verwenden können, solange this.body einen Ist-Wert hat. Vielleicht brauchen Sie nur:

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

Mit dem Beispiel geben Sie, aber Sie können nur den Inhalt Ihrer componentDidMount im constructor stattdessen setzen, da der Konstruktor vor dem ersten Durchlauf macht aufgerufen wird.

Answer 4

Ich habe Arbeitsbeispiel hier JSfiddle ReactJS

Sie nicht JSX verwenden. Wenn Sie dies tun, müssen Sie die Fabrik verwenden. Sie können auch reguläres HTML in der render-Methode rendern, sowie JavaScript in Ihrem Code mit geschweiften Klammern verwenden.

Auch zu bekommen ich Mapping empfehlen würde und Iterieren durch alle Elemente in einem Array und machen sie einer nach dem anderen in dem Verfahren machen

Beispiel siehe unten:

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

Ich glaube, Sie betrachten etwas wie dangerouslySetInnerHtml.

<div dangerouslySetInnerHTML={this.body} />