如何通过 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?