语法错误:C:/Users/J/metafields-for-shopify/src/SettingsForm.js:意

Question

>im 试图根据他们最近在博客上发布的教程制作 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;

Answer 1

看起来您在第 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;