0

我正在玩 Meteor Apollo 演示repo。

我很难将变量传递给 React 的孩子。我收到一个错误

导入/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;

我真的很感激一些指示。

4

1 回答 1

1

我相信错误是您在语句render之前不小心结束了函数。return

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

另一个错误是您的 return 语句没有返回单个 DOM 元素，而是其中两个： anAccounts.ui.LoginForm和 a div。返回函数应该只返回一个元素。只需将整个内容放入一个<div>.

于 2016-05-04T10:51:34.057 回答