Class 如何在react native中包含来自另一个文件的组件视图?

Class 如何在react native中包含来自另一个文件的组件视图?,class,react-native,import,view,include,Class,React Native,Import,View,Include,我有以下几个类,如何在php中包含来自另一个文件(如include()的视图) A类扩展组件{ render(){ 返回( A. ); } } 类扩展组件{ render(){ 返回( B ); } } C类扩展了组件{ render(){ 返回( B ); } } 我必须包含来自外部文件的视图。我们可以通过导入将一个类包含到另一个类中,但是视图呢?基本上,您的问题是关于导入文件。 考虑三件事, 导出 您可以导出多个常量或类,并使用import语句中的{}导入它们 导出默认值 导出默认值使用

我有以下几个类,如何在php中包含来自另一个文件(如include()的视图)

A类扩展组件{
render(){
返回(
A.
);
}
}
类扩展组件{
render(){
返回(
B
);
}
}
C类扩展了组件{
render(){
返回(
B
);
}
}

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

基本上,您的问题是关于导入文件。 考虑三件事,

  • 导出

    您可以
    导出
    多个
    常量或类
    ,并使用import语句中的
    {}
    导入它们

  • 导出默认值

    导出默认值
    使用的关键字从文件导出
    常量
    。导出默认值仅适用于一个文件

  • 导入

    导入关键字用于导入导出的文件,文件路径后跟
    from
    关键字

    import ExportWithDefault,{ExportWithOutDefault}来自“/fileName.js”

参考文献:

让我们考虑组件<代码> A、B、C < /C>文件>代码> COMP.JS<代码>,仅导出为<代码>导出< /代码>。 像


基本上,您的问题是关于导入文件。 考虑三件事,

  • 导出

    您可以
    导出
    多个
    常量或类
    ,并使用import语句中的
    {}
    导入它们

  • 导出默认值

    导出默认值
    使用的关键字从文件导出
    常量
    。导出默认值仅适用于一个文件

  • 导入

    导入关键字用于导入导出的文件,文件路径后跟
    from
    关键字

    import ExportWithDefault,{ExportWithOutDefault}来自“/fileName.js”

参考文献:

让我们考虑组件<代码> A、B、C < /C>文件>代码> COMP.JS<代码>,仅导出为<代码>导出< /代码>。 像


你能清楚你该做什么吗?是否要在第三个组件中显示
组件A
组件B
?或
组件A
内部
组件B
。您所说的
include
组件a、b、c中的所有视图都要添加到另一个文件中,并在这里像phpI中的include()一样包含是什么意思?您认为
include
类似于
import
您能清楚您应该做什么吗?是否要在第三个组件中显示
组件A
组件B
?或
组件A
内部
组件B
。您所说的
include
a、b、c组件中的所有视图都要添加到另一个文件中,并像include()一样包含在此处,这是什么意思在phpI中,think
include
类似于导入错误:无法将没有测量功能的子级添加到父级。我以为您已经在comp.jsview中导入了类似于
视图和文本的内容,并在comp.js和main.js中导入了文本。。但在两个文件中都没有导入错误。那怎么办呢?这是我的错误,实际上我需要在main.js中使用View的两个文件中导入View。将更新ansWe使用的
视图
组件,但忘记导入和响应返回单个元素错误:无法在没有测量功能的情况下向父级添加没有任何元素的子级我以为您已经在comp.jsview中导入了
视图和文本
,在comp.js和main.js中导入了文本。。但在两个文件中都没有导入错误。那怎么办呢?这是我的错误,实际上我需要在main.js中使用View的两个文件中导入View。将更新ansWe使用的
视图
组件,但忘记导入并返回单个元素
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>
    );
  }
}
//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 C extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>C</Text>    
      </View>
    );
  }
}
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>
         )
       }
    }