2016-04-27 28 views
0

Ich habe ein Problem mit der Erstellung von React App. Hier ist das Problem:reagieren Update Komponente Requisiten außerhalb der Komponente Klasse

import React from 'react'; 

const VIEW_MAIN = 0; 
const VIEW_SUB = 1; 

const VIEWS = {}; 
VIEWS[VIEW_MAIN] = (<ViewMain someProps={...} />); 
VIEWS[VIEW_SUB] = (<ViewSub someProps={...} />); 

const AppContent = React.createClass({ 
    render() { 

     let renderDOM = null; 

     if(this.props.view === VIEW_MAIN) { 
      renderDOM = VIEWS[VIEW_MAIN]; 
     } 
     else { 
      renderDOM = VIEWS[VIEW_SUB]; 
     } 

     return (
      <div id="ViewContainer"> 
       {renderDOM} 
      </div> 
     ); 
    } 
}); 

Sie können sehen, dass "Ansichten" konstante Variable enthält 2 Ansichten, VIEW_MAIN und VIEW_SUB. Jede Ansicht ist eine React-Komponente.

Beide Komponenten haben dieselbe Eigenschaft namens "someProps". Nun, das ist das Problem. Ich möchte Eigenschaft der "AppContent" -Komponente in beiden React Components hinzufügen, aber natürlich ist es unmöglich, weil sie außerhalb der Klassendefinition sind.

Also verschieben Sie sie in die Klassendefinition, Problem ist, ich weiß nicht, wo soll ich setzen. Sollte ich die Methode "render" einfügen? Ich denke, das ist eine schlechte Idee, weil die Rendermethode viele Male ausgeführt wird.

Wenn ich das Schlüsselwort "class" anstelle von createClass verwende, denke ich, dass es möglich ist, wenn die Variablenvariablen "VIEWS" innerhalb der Konstruktorfunktion (constructor() sind), aber ich mag sie nicht.

Ich tippte Code wie dieser vorübergehend:

const AppContent = React.createClass({ 
    _initViews() { 
     if(typeof this.VIEWS === 'undefined') { 
      this.VIEWS = {}; 
      this.VIEWS[VIEW_MAIN] = (<ViewMain someProps={this.props.some} />); 
      this.VIEWS[VIEW_SUB] = (<ViewSub someProps={this.props.some} />); 
    }, 
    render() { 
     this._initViews(); 

     ... 
    } 
}); 

Ich habe _initialViews Methode innerhalb der Klasse, und es ausführen, wenn Anrufe machen. Es funktioniert gut, aber das Problem ist immer "_initViews" -Methode beim Rendern AppContent Komponente ausführen. Ich möchte nur einmal ausführen, und ich denke, mit der Reaktion ist das eine schlechte Idee.

Soll ich stattdessen nur das Schlüsselwort Class verwenden? Wie ich gehört habe, gibt es "setProps" -Methode in React, aber das ist jetzt veraltet, und ich denke auch, dass die setProps-Methode eine schlechte Idee ist.

Gibt es einen Weg zur guten Praxis oder besser Lösung, was versuche ich? Wenn es ist, wird es sehr schätzen, dass es mich berät.

Antwort

2

Sie sollten stateless functions implementieren. Füllen Sie VIEWS mit diesen Funktionen und nennen Sie es in Ihrer App {renderDOM} durch so etwas wie <renderDOM someProps={this.props.some}/>

Um zu vermeiden, ersetzen eine Komponente mehrfach rendern zu müssen, verwenden Sie shouldComponentUpdate. Wenn das generierte virtuelle DOM mit dem Browser-DOM konsistent ist, wird auch dann, wenn eine Komponente mehrfach gerendert wird, keine Aktualisierung auf der Seite für diese Komponente durchgeführt.

1

Bei ReactJS geht es darum, den Status Ihrer Anwendung zu rendern. Wenn sich der Status geändert hat, rendern Sie erneut die gesamte Anwendung. Der Trick ist, dass ReactJS es schnell macht, dank Virtual Dom.

Beantworten Sie Ihre Frage: Es ist in Ordnung, Komponente mehrmals zu rendern.

einen Blick auf Einführungsvideos Nehmen: https://facebook.github.io/react/docs/videos.html

Und in Abschnitt Denken Reagieren: https://facebook.github.io/react/docs/thinking-in-react.html

+0

danke für eine gute lösung! – modernator

Verwandte Themen