Reactjs 分析错误：意外标记，应为“；”怎么了？

怎么了

当我试图编译它的时候，我得到了一个错误：解析错误：意外的标记，应该是

代码如下：

<https://pastebin.com/GNbdiG9P>


import React, { useState, useEffect } from 'react';
import connect from '@vkontakte/vk-connect';
import View from '@vkontakte/vkui/dist/components/View/View';
import ConfigProvider from '@vkontakte/vkui/dist/components/ConfigProvider/ConfigProvider';
import '@vkontakte/vkui/dist/vkui.css';
import { Panel, PanelHeader, Tabbar, TabbarItem, Epic } from '@vkontakte/vkui';
import Icon28AddOutline from '@vkontakte/icons/dist/28/add_outline';
import Icon28NewsfeedOutline from '@vkontakte/icons/dist/28/newsfeed_outline';
import Icon28SettingsOutline from '@vkontakte/icons/dist/28/settings_outline';

class App extends React.Component {
    constructor (props) {
      super(props);

        this.state = {
            scheme: "space_gray"
        };
        this.scheme = this.scheme.bind(this);

      this.state = {
        activeStory: 'feed'
      };
      this.onStoryChange = this.onStoryChange.bind(this);

    onStoryChange (e) {
      this.setState({ activeStory: e.currentTarget.dataset.story })
    }
}
    render () {
      return (
        <Epic activeStory={this.state.activeStory} scheme={this.state.scheme} tabbar={
          <Tabbar>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'feed'}
              data-story="feed"
              text="Главная"
            ><Icon28NewsfeedOutline /></TabbarItem>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'add_skin'}
              data-story="add_skin"
              text="Добавить скин"
            ><Icon28AddOutline /></TabbarItem>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'settings'}
              data-story="settings"
              label="12"
              text="Настройки"
            ><Icon28SettingsOutline /></TabbarItem>
          </Tabbar>
        }>
          <View id="feed" activePanel="feed">
            <Panel id="feed">
              <PanelHeader>Главная</PanelHeader>
            </Panel>
          </View>
          <View id="add_skin" activePanel="add_skin">
            <Panel id="add_skin">
              <PanelHeader>Добавить скин</PanelHeader>
            </Panel>
          </View>
          <View id="settings" activePanel="settings">
            <Panel id="settings">
              <PanelHeader>Настройки</PanelHeader>
            </Panel>
          </View>
        </Epic>
      )
    }
}
  export default App;

---

您的配套牙套似乎有一些问题。这是您应该如何修复的：

import React, { useState, useEffect } from 'react';
import connect from '@vkontakte/vk-connect';
import View from '@vkontakte/vkui/dist/components/View/View';
import ConfigProvider from '@vkontakte/vkui/dist/components/ConfigProvider/ConfigProvider';
import '@vkontakte/vkui/dist/vkui.css';
import { Panel, PanelHeader, Tabbar, TabbarItem, Epic } from '@vkontakte/vkui';
import Icon28AddOutline from '@vkontakte/icons/dist/28/add_outline';
import Icon28NewsfeedOutline from '@vkontakte/icons/dist/28/newsfeed_outline';
import Icon28SettingsOutline from '@vkontakte/icons/dist/28/settings_outline';

class App extends React.Component {
    constructor (props) {
      super(props);

      this.state = {
        scheme: 'space_gray',
        activeStory: 'feed'
      };
      this.scheme = this.scheme.bind(this);
      this.onStoryChange = this.onStoryChange.bind(this);
   }

    onStoryChange (e) {
      this.setState({ activeStory: e.currentTarget.dataset.story })
    }

    render () {
      return (
        <Epic activeStory={this.state.activeStory} scheme={this.state.scheme} tabbar={
          <Tabbar>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'feed'}
              data-story="feed"
              text="Главная"
            ><Icon28NewsfeedOutline /></TabbarItem>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'add_skin'}
              data-story="add_skin"
              text="Добавить скин"
            ><Icon28AddOutline /></TabbarItem>
            <TabbarItem
              onClick={this.onStoryChange}
              selected={this.state.activeStory === 'settings'}
              data-story="settings"
              label="12"
              text="Настройки"
            ><Icon28SettingsOutline /></TabbarItem>
          </Tabbar>
        }>
          <View id="feed" activePanel="feed">
            <Panel id="feed">
              <PanelHeader>Главная</PanelHeader>
            </Panel>
          </View>
          <View id="add_skin" activePanel="add_skin">
            <Panel id="add_skin">
              <PanelHeader>Добавить скин</PanelHeader>
            </Panel>
          </View>
          <View id="settings" activePanel="settings">
            <Panel id="settings">
              <PanelHeader>Настройки</PanelHeader>
            </Panel>
          </View>
        </Epic>
      )
    }
}
  export default App;

---

你应该考虑使用一个好的编辑器来解决代码中的问题：

    onStoryChange (e) {
      this.setState({ activeStory: e.currentTarget.dataset.story })
    }
} <-- this is the problem, move it before the function

onStoryChange应该在构造函数之外。此外，在您的案例中，相信scheme不是一种方法，而是一种属性

constructor (props) {
        super(props);

        this.state = {
            scheme: "space_gray",
            activeStory: 'feed'
        };



}

onStoryChange = (e) => {
      this.setState({ activeStory: e.currentTarget.dataset.story })
    }

---

谢谢。

在此处显示代码。pastebin不安全我现在有此错误无法读取未定义的属性“bind”我现在有此问题无法读取未定义的属性“bind”。this.scheme=this.scheme.bindthis；this.onStoryChange=this.onStoryChange.bindthis@ПааМаааааааааааааа1072。如果这是您要寻找的，请不要忘记将其标记为答案：

constructor (props) {
        super(props);

        this.state = {
            scheme: "space_gray",
            activeStory: 'feed'
        };



}

onStoryChange = (e) => {
      this.setState({ activeStory: e.currentTarget.dataset.story })
    }