reactjs：意外的標記標籤

Question

我試圖在這裏使用react-tabs https://github.com/reactjs/react-tabs在我的用戶界面上創建標籤。這是到目前爲止我的代碼：

index.jsx：

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

main(); 

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

這是我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> 
    ); 
    } 
} 

但是，這是我得到的錯誤：

ERROR in ./TabsApp.jsx 
Module build failed: SyntaxError: C:/x/TabsApp.jsx: Unexpected token (14:8) 

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

任何人都可以幫助我？

我正在使用webpack dev服務器。和0.14.7反應

Answer 1

看起來像你的問題是在index.jsx。您沒有使用反應來呈現組件。你index.jsx應該是這樣的：

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

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

Answer 2

你有

render() { 
    return (
     {} 

     <Tabs 

擺脫的那個隨機{}那裏。您不能返回空對象和<Tabs>組件。

erichardson30也是正確的...這是另一個問題。