如何通過createContainer傳遞react.js數據，如meteor.js或relay.js

Question

我喜歡從meteor和relay.js接收react.js數據的概念。 例如meteor.js ，在createContainer我從localstorage獲取數據：

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

或者示例表單relay.js ，其中在createContainer從graphQL獲取的數據數據指定了props ：

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}`,
  },
});

如何使這個函數從websocket接收數據？ 我可以想象這樣的代碼：

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

我不完全明白如何最好寫，所以請幫忙。

Answer 1

我看起來像在meteor.js 。 我理解它應該如何運作。 只需要創建一個將返回react.js組件的函數。 並傳遞參數和組件本身以及所有參數。 在createContainer函數中，已經可以從websockets獲取數據或從indexDB取出數據。

如果非常簡單，它可能看起來像這樣：

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

流星中組件的完整代碼如下：

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