使用 Meteor Apollo 反应道具

Question

我正在玩 Meteor Apollo 演示 repo。

我在使用 React 将变量传递给 children 时遇到困难。我收到一个错误

imports/ui/Container.jsx:10:6: Unexpected token (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

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

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

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

使用 Meteor Apollo 反应道具

React props using Meteor Apollo

meteor

apollo

reactjs