Как включить вид на компонент из другого файла в реагировать родной? - PullRequest
Новая
       12

Как включить вид на компонент из другого файла в реагировать родной?

0 голосов
/ 05 июля 2018

У меня есть следующие классы, как я могу включить View из другого файла, например include () в php. 

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>
    );
  }
}

Я должен включить просмотр из внешнего файла. мы можем включить один класс в другой, просто импортировав, а как насчет представления?

1 Ответ

0 голосов
/ 05 июля 2018

По сути, у вас есть вопрос об импорте файла. Рассмотрим три вещи,

  • экспорт

    Вы можете export кратно const or class и импортировать их с помощью {} в операторе импорта.

  • экспорт по умолчанию

    export default используется ключевое слово экспорта const или class из файла. Экспорт по умолчанию только для одного файла .

  • импорт

    ключевое слово import, используемое для импорта экспортируемых файлов, с путем к файлу, за которым следует from ключевое слово

    import ExportWithDefault, {ExportWithOutDefault} from './fileName.js'

Ссылки: импорт , экспорт, экспорт по умолчанию

давайте рассмотрим Компонент 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>
    );
  }
}

класс экспорта B расширяет Компонент { render () { вернуть ( В ); } } 

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>
         )
       }
    }
...