我有以下代码:
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 };
export {default as Header} from './Header'; export {default as Footer} from './Footer'; export {default as Sidebar, Item} from './Sidebar';
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文件并从另一个文件中调用?我确定页眉和页脚正常工作,因为该文件中只有一个类。
index.js
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表中看到了这种做法。