Reagieren Requisiten mit Meteor Apollo

Question

Ich spiele mit der Meteor Apollo Demo repo.

Ich habe Schwierigkeiten mit der Weitergabe von Variablen an Kinder mit React. Ich erhalte einen Fehler

Importe/ui/Container.jsx: 10: 6: unerwartetes Token (10: 6)

Der Code unten ist die Container.jsx Komponente:

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!' } 
    ); 
    } 
} 

Es wird über den Meteor Apollo Datensystem übergeben Requisiten (ich habe einige Importe an der Spitze weggelassen):

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; 

Ich würde gerne einige Hinweise zu schätzen wissen.

Answer 1

Ich glaube, der Fehler ist, dass Sie versehentlich die render Funktion vor der return Anweisung beendet.

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

Ein weiterer Fehler ist, dass Ihre return-Anweisung nicht ein einziges DOM-Element zurückgibt, aber zwei von ihnen: ein Accounts.ui.LoginForm und ein div. Die Rückkehrfunktion sollte nur ein Element zurückgeben. Setzen Sie das Ganze in eine einzige <div>.