ReactNative学习笔记(五)——导出与导入

     今天继续跟着视频学习,主要学习了导入与导出,总结如下:

      一,如何导出一个组件,如何使用导出的组件

            在定义组件时,加上export default。例如 export default class HelloComponent extends Component{},或者也可以使用ES5的方式。在定义完组件后,用module.exports = 组件名;例如:module.exports = HelloComponent;来导出组件。

            在其他文件中使用导出的组件时,用import 组件名 from '文件的路径+名称';来导入组件。

            例如 import HelloCompoent from './HelloComponent';

二,如何导出一个变量或常量,如何使用导出的变量和常量

            export let name = ‘孙悟空';    //导出变量name

            let age = 30;            //定义变量age

            const sex = '男';    //定义常量sex

           export{age,sex};        //导出变量age和常量sex,大括号必须加,不然会出错

        在其他文件中使用:

      import{name,age,sex} from'./HelloComponent';   大括号也必须加   

       然后在需要的地方直接使用就可以了。

三,如何导出一个方法,如何使用导出的方法

      export function sum(a,b){        //导出方法sum

            return a+b;

    }

    

  在其他文件中使用:

      import {sum} from'./HelloComponent';   大括号也必须加   

       然后在需要的地方直接使用就可以了。

        导入组件,变量,常量,方法已经介绍完了。

        总体导入的语句是这样的 import HelloComponent ,{ name,age,sex,sum } from'./HelloComponent'; 

        你会发现,为什么HelloComponent不在大括号里呢?写到大括号里会出错吗?name,age等为什么要在大括号里呢?写到大括号外面会出错吗?

        原因是这样的,在导出HelloComponent组件时,使用的是 export default的方法,是默认导出的,所以不用加到大括号里,加进去的会出错的。如果你在导出时,没有使用default,那么它就可以写到括号里了。

       所以,默认导出的就写到括号外面,不是默认导出的就写到括号里面。一个module只能有一个默认导出的值。而且经过我的测试,只有class和function能被默认导出,其他的都会报错。

      参考:

        项目导入与导出


阅读更多

没有更多推荐了,返回首页