时间戳

首页 > 解决方案 > JSX 元素类型“查询”不是 JSX 元素的构造函数

typescript - JSX 元素类型“查询”不是 JSX 元素的构造函数

问题描述

卡住了这个打字稿错误。尝试使用Query来自react-apollo.

JSX element type 'Query<any, { id: number; }>' is not a constructor function for JSX elements.
  Property 'setState' is missing in type 'Query<any, { id: number; }>'.
[ts] JSX element class does not support attributes because it does not have a 'props' property.
[ts] Property 'query' does not exist on type '{}'

版本：

typescript: "^2.9.2",
apollo-boost: "^0.1.16",
react-apollo: "^2.1.11",

零件：

import gql from "graphql-tag";
import * as React from "react";
import { Query } from "react-apollo";

const ORGANISATION_QUERY = gql`
  query OrganisationQuery($id: Long!) {
    organisation(id: $id) {
      tasksEnabled
  }}`;

export class FeatureCardGraphQlComponent extends React.Component<{}
{}> {
public render() {
 return (
  <Query query={ORGANISATION_QUERY} variables={{ id: 1 }}>
    {({ data }) => {
      return <div>{data}</div>;
    }}
  </Query>
 );
}}

标签： typescriptgraphqlapolloreact-apollo

解决方案

{} 后面好像少了一个逗号

尝试这个：

const ORGANISATION_QUERY = gql`
  query OrganisationQuery($id: Long!) {
    organisation(id: $id) {
      tasksEnabled
  }}`;

export class FeatureCardGraphQlComponent extends React.Component<{}, {}> {
public render() {
 return (
  <Query query={ORGANISATION_QUERY} variables={{ id: 1 }}>
    {({ data }) => {
      return <div>{data}</div>;
    }}
  </Query>
 );
}}

推荐阅读