如何通过 createContainer(如流星.js 或 relay.js)传递 react.js 数据

Posted

技术标签:

【中文标题】如何通过 createContainer(如流星.js 或 relay.js)传递 react.js 数据【英文标题】:How to pass react.js data via createContainer like meteor.js or relay.js 【发布时间】:2017-07-19 23:33:17 【问题描述】:

我喜欢从流星和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 where in createContainer data data 从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>

我不完全理解如何最好地写作,所以请帮忙。

【问题讨论】:

这是个好问题。我也有兴趣了解这一点。 @Yumiko 我在下面找到了这个问题的答案。 【参考方案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 />; ,
  );

meteor中组件的完整代码如下:

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

【讨论】:

以上是关于如何通过 createContainer(如流星.js 或 relay.js)传递 react.js 数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在流星模板中创建全局函数

流星如何更新浏览器?

如何在我的流星应用程序数据库中使用 mongoimport?

如何使用流星帐户和自动生成添加/编辑用户

summernote 编辑器如何用流星存储在 mongodb 中

如何将下拉值传递给模板助手。 [流星+火焰]