如何在本机中包含来自另一个文件的组件的视图?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在本机中包含来自另一个文件的组件的视图?相关的知识,希望对你有一定的参考价值。

我有以下类,我可以在php中包含另一个文件,如include()。

class A extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>A</Text> 
      </View>
    );
  }
}

class B extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>B</Text>
      </View>
    );
  }
}

class C extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>B</Text>    
      </View>
    );
  }
}

我必须在外部文件中包含View。我们可以通过导入将一个类包含到另一个类但是视图呢?

答案

基本上,你有一个问题是关于导入文件。考虑三件事,

  • 出口 你可以export多个const or class并导入它们与导入声明中的{}
  • 出口默认 export default关键字使用从文件导出constclass。导出默认值仅适用于一个文件。
  • 进口 import关键字用于导入导出的文件,文件路径后跟from关键字 import ExportWithDefault, {ExportWithOutDefault} from './fileName.js'

参考文献:importexport, export default

让我们考虑组件A,B,C文件comps.js只导出为export。喜欢

//file comp.js


 import React,{Component} from 'react'
 import {View, Text} from 'react-native'
   export class A extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>A</Text> 
      </View>
    );
  }
}

export class B extends Component {render(){return(B); }}

export class C extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>C</Text>    
      </View>
    );
  }
}

现在考虑文件main.js是您要导入A,B,C并显示的文件。

import React, { Component} from 'react
import { View} from 'react-native
import {A,B,C} from './comp'; //considering both files in same directory
    class Main extends Component {
       render(){
         return(
         <View>
            <A/>
            <B/>
             <C/>
           </View>
         )
       }
    }

以上是关于如何在本机中包含来自另一个文件的组件的视图?的主要内容,如果未能解决你的问题,请参考以下文章

另一个文件中包含的 T4 缩进代码

如何在 Prolog 中包含 .pl 文件?

在使用 IVY 的项目中包含来自文件系统的项目 JAR 无法提取源代码和 javadoc

如何在我的应用程序中包含 64 位和 32 位本机代码

Jade 中包含和块的区别

在 C++ 中包含来自单独文件夹的文件