如何通过 createContainer 传递 react.js 数据，例如 meteor.js 或 relay.js

Question

我喜欢 react.js 从 meteor 和 relay.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 中有效。我明白它应该如何运作。只需要创建一个将 return 成为 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

如何通过 createContainer 传递 react.js 数据，例如 meteor.js 或 relay.js

How to pass react.js data via createContainer like meteor.js or relay.js

javascript

node.js

meteor

reactjs

relayjs