reactjs：意外的令牌选项卡

Question

I'm trying to use react-tabs here https://github.com/reactjs/react-tabs to create tabs on my UI. This is my code so far:

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import TabsApp from './TabsApp.jsx';

main();

function main() {
    render(<TabsApp/>, document.getElementById('container'));
}

And this is my TabsApp.jsx:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

class TabsApp extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (
      {}

      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        {}

        <TabList>

          {}

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        {}

        <TabPanel>
          <h2>Hello from Foo</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Bar</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Baz</h2>
        </TabPanel>
      </Tabs>
    );
  }
}

But this is the error I'm getting:

 ERROR in ./TabsApp.jsx Module build failed: SyntaxError: C:/x/TabsApp.jsx: Unexpected token (14:8) <Tabs onSelect={this.handleSelect} selectedIndex={2} > 

Can anyone please help me?

I'm using webpack dev server. And 0.14.7 react

Answer 1

Looks like your issue is in index.jsx. You are not using react to render the component. Your index.jsx should look like :

import React from 'react';
import ReactDOM from 'react-dom';
import TabsApp from './TabsApp.jsx';

ReactDOM.render(
  <TabsApp />,
  document.getElementById('container')
);

Answer 2

You've got

  render() {
    return (
      {}

      <Tabs

Get rid of that random {} there. You can't return an empty object AND a <Tabs> component.

erichardson30 is also correct... that's another problem.