使用点表示法进行多次导出

Question

我有这段代码：

Sidebar.jsx

class Sidebar extends Component {
    render() {
    return (
        <div className="sidebar">
          { this.props.children }
        </div>
    );
  }
}


class Item extends Component {
  render() {
    return (
        <div>
            <b> { this.props.name } </b>
        </div>
    );
  }
}

export { Sidebar, Item };

index.js

export {default as Header} from './Header';
export {default as Footer} from './Footer';
export {default as Sidebar, Item} from './Sidebar';

app.jsx

import { Sidebar } from '../components';
class App extends Component {
  render() {

    return (
      <div>
          <Header/>
          <Sidebar>
              <Sidebar.Item name='item1' />
              <Sidebar.Item name='item2' />
              <Sidebar.Item name='item3' />
          </Sidebar>
          <Footer/>
// ...

我得到的错误是：

  

TypeError：无法读取未定义

的属性'Item'

如何在index.js中使用多个导出组件并从另一个文件调用？我确信页眉和页脚正常工作，因为我在该文件中只有一个类。

Answer 1

你试过吗

import { Item } from '../components';

然后使用它：

<Item name='item1' />