标签: meteor-react

我是使用react.js的新手,我正在尝试编写一个可重用的组件,该组件具有传递给它的可选属性.在组件中,该可选属性使用meteor从db中提取数据,然后我想检查返回对象上是否存在属性(任务中是否存在parent_task),如果存在,则添加链接.这似乎相当简单,但我一直在收到错误.有没有人对我可能缺少什么有任何建议？我缺少一个jsx陷阱吗？

<Header task={params.task_id} />  // rendering component with property

// Task List Header
Header = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    var handle = Meteor.subscribe('tasks');

    return {
      taskLoading: ! handle.ready(),
      task: Tasks.findOne({_id: this.props.task})
    }
  },

  getParentTaskLink() {
    if (!this.data.taskLoading) {
      var current_task = this.data.task;

      if (parent_task in current_task) {  // or current_task.hasOwnProperty(parent_task)
        console.log("parent_task exists!");
      }
    }
  },

  render() {
    return (
      <div className="bar bar-header bar-calm">
        {this.getParentTaskLink()} // eventually return anchor element here
        <h1 className="title">Hello World</h1>
      </div>
    )
  }
});

我正在努力弄清楚如何Meteor.user()在react组件中等待订阅.我知道用户已登录因为Meteor.userId()返回_id,但尝试访问电子邮件地址show Meteor.user()返回undefined.我假设因为它尚未可用.

唉,既然Meteor.user()不是我手工订阅的出版物,我不知道如何在React组件中等待它.有人能指出我的榜样吗？

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Link } from 'react-router';
import { createContainer } from 'meteor/react-meteor-data';

import './BaseLayout.scss';


class BaseLayout extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: (Meteor.userId() !== null) ? true : false,
        }
    }

    componentWillMount() {
        if (!this.state.isAuthenticated) {
            this.context.router.push('/login');
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (!this.state.isAuthenticated) {
            this.context.router.push('/login');
        }
    }

    toggleUserMenu() {
        this.refs.userMenu.style.display = (this.refs.userMenu.style.display === 'block') ? …

我正在动态创建多个文本输入(使用动态创建的引用)和我想要用输入更新的文本.

我试图通过将ref设置为变量并使用React.findDOMNode(this.refs.Variable).value查找DOM节点来获取输入的值.

我得到一个"无法读取属性'值的'null"错误.

我怎样才能做到这一点？

这就是函数的样子:

resetUnit: function(e){
  var refID = e.target.id;
  var ID = refID.split("-")[0];
  var Value = React.findDOMNode(this.refs.refID).value;
  NodesCollection.update({_id: ID},{$set: { materialUnit : Value}});
  this.setState({
    edit: ''
  });
},

我正试图在我的Meteor应用程序中使用react-router实现alanning Meteor-roles.一切都工作得很好,除了我无法正确管理使用alanning角色限制路线或事实Meteor.user()

我尝试过流星角色:

我正在尝试使用onEnter={requireVerified}我的路线.这是代码:

const requireVerified = (nextState, replace) => {
    if (!Roles.userIsInRole(Meteor.userId(), ['verified'],'user_default')) {
        replace({
            pathname: '/account/verify',
            state: { nextPathname: nextState.location.pathname },
        });
    }
};

我试过Meteor.user():

const requireVerified = (nextState, replace) => {
  if (!Meteor.user().isverified == true) {
    replace({
      pathname: '/account/verify',
      state: { nextPathname: nextState.location.pathname },
    });
  }
};

所以当我点击路线链接时这是有效的,但是当我手动刷新(F5)时,它不起作用.在深入研究之后,我发现Meteor.user()在手动刷新页面时还没有准备好.

我知道Meteor.userid()或Meteor.logginIn()正在运行,但我想验证的不仅是它们已被记录,而且它们是"已经过验证"还是有角色.

我还尝试用反应来检查组件内部,componentDidMount()或者componentWillMount(),在两种情况下它都是相同的,手动新鲜不会Meteor.user()在安装功能之前加载.

那么使用meteor/alaning角色+反应路由器来限制组件/路由的最佳方法是什么？(我在TheMeteorChef的基地内使用react-komposer)

谢谢.

我目前正在使用Meteor，ReactJS和React Router（用于路由）开发应用程序。我有一个要求，用户应该能够上载一个压缩的网站，而Meteor应用程序则需要将该网站显示为其中一个页面的一部分。

典型的zip文件将包含以下类似的模式，

ZippedFolder
    |-- css
    |    |-- bootstrap.css
    |    |-- bootstrap.min.css 
    |    +-- style.css
    |-- js
    |    |-- bootstrap.js
    |    |-- bootstrap.min.js
    |    +-- script.js 
    +- index.html

我已经设置了CollectionFS，将zip文件存储到文件系统中，并使用meteorhacks：npm和几个npm软件包，可以将文件解压缩到一个已知位置。

ZippedFolder
    |-- css
    |    |-- bootstrap.css
    |    |-- bootstrap.min.css 
    |    +-- style.css
    |-- js
    |    |-- bootstrap.js
    |    |-- bootstrap.min.js
    |    +-- script.js 
    +- index.html

在React组件上，我正在使用以下代码片段上传压缩的HTML内容。

HTMLContent = new FS.Collection("html_content", {
  stores: [new FS.Store.FileSystem("html_content"]
});

HTMLContent.on('stored', Meteor.bindEnvironment(function (fileObj) {
  let unzip = Meteor.npmRequire('unzip'),
    fs = Meteor.npmRequire('fs'),
    path = fs.realpathSync(process.cwd() +  '/../../../cfs/files/html_content/'), …

我有一个简单的Meteor订阅,我在加载数据时显示加载消息.但是,如果订阅失败,我不知道如何显示错误消息.

export const MyAwesomeComponent = createContainer(() => {
  let sub = Meteor.subscribe('some-data');
  if (!sub.ready()) return { message: 'Loading...'};
  if (sub.failed()) return { message: 'Failed.' }; // How to do this?
  return {
    data: Data.find().fetch()
  }
}, MyInternalRenderComponent);

问题是,订阅对象没有failed()方法,只有ready()查询.如何将订阅失败作为createContainer()方法中的道具传递？

我知道这个Meteor.subscribe方法有一个onStop回调用于这种情况,但我不知道如何粘合它以传递属性.

我有一个非常简单和可怕的问题.

让我们说,我有一个React组件(称为List)包裹createContainer:

class List extends Component {
  render() {
    return (
      ...
    );
  }
}
export default createContainer({
  ...
}, List);

List父母有一个道具:activeListId.

我createContainer用来订阅订阅,但我需要在该订阅中传递一个参数.参数是activeListId值.

export default createContainer({
  Meteor.subscribe('ListItems', this.props.activeListId);
  return {
    ...
  }
}, List);

所以我需要访问createContainer代码中原始组件的props .这太奇怪了,但我不能这样做!this上下文中createContainer是从不同的this内部List.

谁知道如何实现这一目标？

我正在尝试播放存储在 Meteor Android 应用程序的 LocalForage 中的音频文件。

LocalForage.getItem(track_id, (err, value)=>{
    if(err)
        throw err;
    //the loaded value is an arraybuffer of an m4a file
    let blob = new Blob([value]);
    let url = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
    let testAudio = new Audio(url);
    testAudio.play().then(()=>{console.log("play successful")}).catch((err)=>{console.error(err)});
});

之前，我将 url 传递给 Howler.js 的实例，但为了更容易理解发生的情况，我添加了 testAudio。

在浏览器 (Chrome) 中测试时，代码可以正常工作。URL 已创建并且音频正在播放。

然而，Android（使用 Chromium 作为所有 Meteor Android 应用程序）似乎不喜欢我的方法：创建对象 URL 时，Chromium 返回如下 URL：

blob:http%3A//localhost%3A12128/4de4516a-2989-4e99-9269-0beff4517fc4

正如你所看到的，这不是一个可用的 URL，即使我这样做

url = url.replace(/%3A/g, ':');

控制台输出结果是

DOMException: Failed to load because no supported …

我在使客户端显示所有注册用户时遇到一些麻烦.std:accounts-ui包装包括在内.meteor/packages.autopublish包已被删除.

所有用户的数据都以Users.jsas的形式发布allUsers,而客户端allUsers则从createContainer提供的内部订阅该发布react-meteor-data.

但是,该页面仅呈现当前登录用户的详细信息.Meteor.users().find().fetch()在浏览器中运行JS控制台仅显示当前登录的用户,如果用户未登录则不显示任何内容.

console.log(Meteor.users.find().fetch()在服务器端运行正确输出所有用户.

为什么会在浏览器上发生这种情况？

/imports/api/Users.js

import { Meteor } from 'meteor/meteor';

if (Meteor.isServer) {
    Meteor.publish('allUsers', function() {
        return Meteor.users.find({});
    })
}

/imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Accounts } from 'meteor/std:accounts-ui';
import { Table } from 'react-bootstrap';
import User from './User';


export class App extends Component {

    renderUsers() { …

我正在与Meteor开始一个新项目,我想--full在创建项目时使用该架构:meteor create myApp --full

但是,我真的不了解导入/ ui /中某些文件夹的目的和差异:

• 组件
• 布局
• 网页

尤其之间的差值layouts和pages.它们应包含哪些类型的代码？