带点符号的多重导出

JSX

关注

发信

关注(28)粉丝(399)

带点符号的多重导出

本文介绍了带点符号的多重导出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个代码:

侧边栏.jsx

class Sidebar extends Component {使成为() {返回 (<div className="sidebar">{ this.props.children }

);}}类项目扩展组件{使成为() {返回 (<div><b>{ this.props.name } </b>

);}}出口{侧边栏，项目}；

index.js

export {default as Header} from './Header';从'./Footer'导出{默认为页脚}；从 './Sidebar' 导出 {default as Sidebar, Item}；

app.jsx

import { Sidebar } from '../components';类 App 扩展组件 {使成为() {返回 (<div><标题/><侧边栏><Sidebar.Item name='item1'/><Sidebar.Item name='item2'/><Sidebar.Item name='item3'/></侧边栏><页脚/>//...

我得到的错误是:

TypeError: 无法读取未定义的属性Item"

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

解决方案

function Sidebar(props) {返回 (<div className="sidebar">{ props.children }

);}功能项(道具){返回 (<div><b>{ this.props.name } </b>

);}Sidebar.Item = {Item}导出默认侧边栏

那么你就可以这样使用了

从'./Sidebar.js'导入侧边栏...返回 (<侧边栏><Sidebar.Item/></侧边栏>)

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

class Sidebar extends Component {使成为() {返回 (<div className="sidebar">{this.props.children}

);}}类 SidebarItem 扩展组件 {使成为() {返回 (<div><b>{props.name} </b>

);}Sidebar.Item = SidebarItem;导出默认侧边栏；

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

I have this code:

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/>
// ...

The error that I get is:

How I can multiple export component in index.js and call from another file? I'm sure that Header and Footer work correctly because I have only one class in that file.

解决方案

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

Then you can use it like this

import Sidebar from './Sidebar.js'

...

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

If you're using class based components, you can remove the curly braces

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;

I learned this practice from a coworker that saw it in semantic ui's table here.

这篇关于带点符号的多重导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-10 09:10