zoukankan      html  css  js  c++  java
  • react 组件导出

    前段时间忙于公司的招聘,导致react学习停滞了一段时间。今天通过react官方文档在本地创建了一个项目,把里面的文件自己重新开发。遇到了一个有意思的问题

    class App extends React.Component {
    render() {
    return (
    <div className="App">
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to 1231231231</h1>
    </header>
    <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    </div>
    );
    }
    }
    export default App;
    这是官方文档自带的代码,在app.js里面,然后在index.js 引入 import App form './app';然后可以页面可以正常展示;这个export default App 是导出组件,然后在别的文件引入就可以直接使用。但是我看其它的项目不是每一个文件都使用了 export
    default 进行导出。而是直接在定义组件的使用直接使用
    export default class App extends React.Component {}
    同样在别的页面也可以直接使用。
    下面这种方式一般是默认组件的导出方式,自定义组件更多的使用第一种方式。
    扩展

    没有加default时,例如:

    export default Template{};

    当然,你可以在单个js文件里声明多个组件,例如Templates.js

    export class Template{}

    export class OtherTemplate{}

    这样在其他文件引用时,需要使用{}符号且组件名称必修和class名称一样,像这样子:

    import {Template,OtherTemplate} from './component/Template';

    而加default时,例如:

    export default class Template{};

    export class OtherTemplate{};

    然后在其他文件引用,像这样子:

    import Template,{OtherTemplate} from './component/Templates';  //从Templates引入组件将其命名为Template,以及引入OtherTemplate非默认组件

    但是每个文件里只能有一个default组件,可以包含其他多个非default组件:



  • 相关阅读:
    20151010 C# 第一篇 变量类型
    20151009 C# 第一篇 程序编写规范
    20151009 C# 第一篇 基础知识
    VS 控件命名规范
    Replace Pioneer 续用2
    bcb安装控件方法汇总
    Unresolved external 'LresultFromObject'
    Form居中显示
    C++Builder 中 Enter键或者Tab键无效
    解决Ubuntu鼠标右键无反应
  • 原文地址:https://www.cnblogs.com/bcjz/p/8807749.html
Copyright © 2011-2022 走看看