Syntax error: C:/Users/J/metafields-for-shopify/src/SettingsForm.js: Unexpected token, expected , (18:1)

Syntax error: C:/Users/J/metafields-for-shopify/src/SettingsForm.js: Unexpected token, expected , (18:1)

我试图根据他们最近在博客上发布的教程制作一个 shopify 应用程序,但我遇到了

的语法错误

语法错误:C:/Users/J/metafields-for-shopify/src/SettingsForm.js: 意外标记,预期,(18:1)

谁能帮我找出我哪里出错了...

import React, { Component } from 'react';
import {
AccountConnection,
Layout,
Link
} from '@shopify/polaris';

class SettingsForm extends Component {
render() {
return (
 <Layout>
    <Layout.AnnotatedSection
      title="Connected store"
      description="Connect your Shopify store in order to use the metafield editor"
     />
</Layout>

accountConnectionMarkup() {
    <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
      />
},

constructor(props) {
    super(props);
    this.state = {
      connected: false,
    };
},
toggleConnection() {
    this.setState(({connected}) => ({connected: !connected}));
},
accountConnectionMarkup() {
    return this.state.connected
    ? (
      <AccountConnection
        avatarUrl="https://gravatar.com/avatar/57dde0bd2de4350c196d9fb235703b83?s=200"
        accountName="Dominic McPhee"
        details="craigmont.myshopify.com"
        action={{content: 'Disconnect', onAction: this.toggleConnection.bind(this, this.state)}}
        connected={this.state.connected}
      />
    ) : (
      <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
        termsOfService={<p>By clicking Connect, you agree to accept Dropshipp’s <Link url="https://shopify.com">Terms and conditions</Link>. You’ll pay a commission rate of 15% on sales made through Dropshipp.</p>}
        connected={this.state.connected}
      />
    )
    }

);
}
}

export default SettingsForm;

您好像在第 18 行之前少了一个逗号。

试试这个,我在第 16 行 </Layout> 之后添加了逗号。

import React, { Component } from 'react';
import {
AccountConnection,
Layout,
Link
} from '@shopify/polaris';

class SettingsForm extends Component {
render() {
return (
 <Layout>
    <Layout.AnnotatedSection
      title="Connected store"
      description="Connect your Shopify store in order to use the metafield editor"
     />
</Layout>,

accountConnectionMarkup() {
    <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
      />
},

constructor(props) {
    super(props);
    this.state = {
      connected: false,
    };
},
toggleConnection() {
    this.setState(({connected}) => ({connected: !connected}));
},
accountConnectionMarkup() {
    return this.state.connected
    ? (
      <AccountConnection
        avatarUrl="https://gravatar.com/avatar/57dde0bd2de4350c196d9fb235703b83?s=200"
        accountName="Dominic McPhee"
        details="craigmont.myshopify.com"
        action={{content: 'Disconnect', onAction: this.toggleConnection.bind(this, this.state)}}
        connected={this.state.connected}
      />
    ) : (
      <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
        termsOfService={<p>By clicking Connect, you agree to accept Dropshipp’s <Link url="https://shopify.com">Terms and conditions</Link>. You’ll pay a commission rate of 15% on sales made through Dropshipp.</p>}
        connected={this.state.connected}
      />
    )
    }

);
}
}

export default SettingsForm;