带点符号的多重导出答案

【问题标题】：Multiple export with dot notation带点符号的多重导出
【发布时间】：2018-02-26 20:42:33
【问题描述】：

我有这个代码：

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: 无法读取未定义的属性“项目”

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

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

function Sidebar(props) {
    return (
        <div className="sidebar">
          { props.children }
        </div>
    );
}


function Item (props) {
    return (
        <div>
            <b> { this.props.name } </b>
        </div>
    );
}

Sidebar.Item = {Item}

export default Sidebar

那你就可以这样使用了

import Sidebar from './Sidebar.js'

...

return (
    <Sidebar>
        <Sidebar.Item />
    </Sidebar>
)

如果你使用基于类的组件，你可以去掉花括号

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


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

Sidebar.Item = SidebarItem;

export default Sidebar;

我从一位同事那里学到了这种做法，他在语义 ui 的表 here.987654321@ 中看到了这种做法

【讨论】：

我认为就像reactjs.org/docs/…。谢谢 - 编辑：刚刚尝试但我得到了那个错误：元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：对象。
我认为不行，因为我需要 React.Component 而不是函数。
更新了我的答案以反映这种可能性。谢谢！
@Galupuf 你会如何在 Typescript 中做到这一点？
我不确定，因为我没有在 Typescript 中排练过。但是，您可以发布另一个问题来问:)

【解决方案2】：

你试过了吗

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

然后使用它：

<Item name='item1' />

【讨论】：

另外，Sidebar 不是 Sidebar.js 的默认导出
当我创建其他组件（如 Menu 和 MenuItem）时，像你说的那样做是一个问题。