Question

我正在玩Meteor Apollo演示repo。

我很难将变量传递给使用React的孩子。我收到了错误

imports / ui / Container.jsx：10：6：意外的令牌（10：6）

以下代码是Container.jsx组件：

import React from 'react';
import { Accounts } from 'meteor/std:accounts-ui';

class Container extends React.Component {
  render() {
    let userId = this.props.userId;
    let currentUser = this.props.currentUser;
    }
    return (
      <Accounts.ui.LoginForm />
      { userId ? (
        <div>
          <pre>{JSON.stringify(currentUser, null, 2)}</pre>
          <button onClick={() => currentUser.refetch()}>Refetch!</button>
        </div>
      ) : 'Please log in!' }
     );
   }
 }

通过Meteor Apollo数据系统传递道具（我在顶部省略了一些导入）：

const App = ({ userId, currentUser }) => {
  return (
    <div>
    <Sidebar />
    <Header />
    <Container userId={userId} currentUser={currentUser} />
    </div>
  )
}

// This container brings in Apollo GraphQL data
const AppWithData = connect({
  mapQueriesToProps({ ownProps }) {
    if (ownProps.userId) {
      return {
        currentUser: {
          query: `
            query getUserData ($id: String!) {
              user(id: $id) {
                emails {
                  address
                  verified
                }
                randomString
              }
            }
          `,
          variables: {
            id: ownProps.userId,
          },
        },
      };
    }
  },
})(App);

// This container brings in Tracker-enabled Meteor data
const AppWithUserId = createContainer(() => {
  return {
    userId: Meteor.userId(),
  };
}, AppWithData);

export default AppWithUserId;

我真的很感激一些指示。

Answer 1

我认为错误是您在render声明之前意外结束了return功能。

render() { // <- here it starts
    let userId = this.props.userId;
    let currentUser = this.props.currentUser;
    } // <- here it ends

另一个错误是你的return语句不返回单个DOM元素，而是返回其中两个：Accounts.ui.LoginForm和div。 return函数应该只返回一个元素。只需将整个事物放入一个<div>。

使用Meteor Apollo反应道具

1 个答案: