Question

我尝试在https://github.com/reactjs/react-tabs使用react-tabs在我的UI上创建标签。到目前为止，这是我的代码：

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中。您没有使用react来呈现组件。您的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也是正确的......这是另一个问题。

reactjs：意外的标记选项卡

2 个答案: