IT技术 - 带点符号的多重导出 - 吾爱随笔录

带点符号的多重导出

IT技术 javascript reactjs webpack

2021-05-14 06:48:40

我有这个代码：

侧边栏.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 };

索引.js

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

应用程序.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/>
// ...

我得到的错误是：

类型错误：无法读取未定义的属性“Item”

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

2个回答

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 表中看到了它。

你有没有尝试过

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

然后使用它：

<Item name='item1' />

其它你可能感兴趣的问题

上一篇喉管应该朝哪个方向？下一篇React Redux 表单和连接语法