reactjs：意外的标记标签

问题描述：

我试图在这里使用react-tabs https://github.com/reactjs/react-tabs在我的用户界面上创建标签。这是到目前为止我的代码：reactjs：意外的标记标签

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反应

哪一个是未注意的标记？在我看来，webpack没有设置为处理文件中的jsx ... – flq

答

看起来像你的问题是在index.jsx。您没有使用反应来呈现组件。你index.jsx应该是这样的：

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

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

答

你有

render() { 
    return (
     {} 

     <Tabs

摆脱的那个随机{}那里。您不能返回空对象和<Tabs>组件。

erichardson30也是正确的...这是另一个问题。

reactjs：意外的标记标签

相关推荐