Wie passiere react.js Daten über createContainer wie meteor.js oder relay.js

Question

Ich mag das Konzept des Empfangens von Daten in react.js von Meteor und relay.js. Zum Beispiel meteor.js, in createContainer ich Daten von localstorage erhalten:

class App extends Component { 
    render(){ 
    return (<div>{this.props.doc}</div>); 
    } 
} 
export default createContainer(() => { 
    subscribe('doc'); 
    return { doc:Docs.find() }; 
}, App); 

Oder Beispiel Form relay.js wo in createContainer Daten Daten aus dem propsgraphQL erhalten zugeordnet:

class App extends React.Component { 
    render() { 
    var name = this.props.tea; 
    return (<li key={name}>{name}</li>); 
    } 
} 
App = Relay.createContainer(App, { 
    fragments: { 
    tea:() => Relay.QL`fragment on Tea {name}`, 
    }, 
}); 

Wie eine solche Funktion zu sorgen, dass wird Daten von websocket erhalten? Ich kann Code wie folgt vorstellen:

class App extends Component { 
    render(){ 
    return (<div>{this.props.doc}</div>); 
    } 
} 
export default createContainer(() => { 
    return { doc:Docs.find() }; 
}, App); 

ReactDOM.render(<App>, document.getElementById('root')); 


function createContainer(options, callback) { 
    var props; 
    var socket = new WebSocket("ws://localhost:8081"); 
    socket.onmessage = function(event) { 
     props = event.data; 
    }; 
    <callback data={props}> 
} 

ich nicht vollständig verstehen, wie man am besten so zu schreiben, bitte helfen Sie.

Answer 1

Ich sah aus wie es in einer meteor.js funktionierte. Und ich verstehe, wie es funktionieren soll. Sie müssen nur eine Funktion erstellen, die eine react.js Komponente zurückgibt. Und übergeben Sie die Parameter und die Komponente selbst und alle. In createContainer Funktion ist es bereits möglich, Daten von websockets zu erhalten oder aus indexDB herauszunehmen.

wenn sehr einfach es könnte wie folgt aussehen:

import React from 'react'; 
export default function createContainer(options = {}, Component) { 
    return React.createClass({ 
    displayName:'DataContainer',  
    render() { return <Component data=options />; }, 
    }); 
} 

der vollständige Code der Komponente in der Meteor wie folgt aussieht:

https://github.com/jedwards1211/react-meteor-data/blob/master/src/createContainer.js