Question

我没有想法所以我想问你。我尝试读取文件，然后动态呈现该文件中的组件。例如，我将拥有MyComponent，我将把所有组件放在JSON对象中，当我读取文件时，它将通过我需要的道具值发送。这很好，但是当我想渲染一个特定的对象时，通过一些带有readfile函数的异步fs库接收的字符串不能在方括号[]中访问，并且给我一个错误。

所以它 - 加载文件组件，向抽象组件发送道具，其中所有组件都存储在JSON中...当我加载const SuperComponent = components [this.props.compType];然后返回它像return（）它不会加载因为我有promisied字符串（从文件）但是当我输入该变量＆＃39; MyComponent＆＃39;手工工作......但是当它从文件加载它崩溃....任何想法如何通过它？需要它用于我的项目...

所以我在这里阅读XML和解析（我试图显示一个组件 - 向他发送一个函数来增加processingObject整数的计数，然后显示Array的下一个组件原因.... / p>

//Here I'm reading the file and passing prop to abstract component
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import RNFS from 'react-native-fs';
export default class App extends Component {
constructor(props){
super(props);

this.state = {
  arrayComponentNames:[],
  currentCompo:0,
}
}
 async readScheme() {

        let file = await RNFS.readFile(this.state.actualScheme, 'utf8');
        let xml = new XMLParser().parseFromString(file);
        let scheme = xml.getElementsByTagName('Scheme')[0];
        this.setState({
            SchemeCount: xml.getElementsByTagName('Scheme').length
        });
        let SchemePropertiesLength = scheme.children.length;
        for (let o = 0; o < SchemePropertiesLength; o++) {
            switch (scheme.children[o].name) {
                case 'FirstComp':
                    let oldArray1 = this.state.arrayComponentNames;
                    oldArray1.push(scheme.children[o].value);
                    this.setState({
                        arrayComponentNames: scheme.chidlren[o].value;
                    });
                    break;
                case 'SecondComp':
                    let oldArray2 = this.state.arrayComponentNames;
                    oldArray2.push(scheme.children[o].value);
                    this.setState({
                        arrayComponentNames: scheme.chidlren[o].value;
                    });
                    break;
        }
    }
increase(){
this.setState({currentCompo:this.state.currentCompo+1});
}
  render() {
    return (
      <View style={styles.container}>
        <MyComponent type={this.state.arrayComponentNames} onPressFunc={() => this.increase()}/>
      </View>
    );
  }
}

在这里我试图从文件中获取字符串并通过props发送到另一个抽象组件，该组件应决定将呈现哪个组件......

//Here I'm reading the file and passing prop to abstract component
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import RNFS from 'react-native-fs';
import xml-parser from 'react-xml-parser';


const components = {
  first:First,
  second:Second,
}
export default class App extends Component {
constructor(props){
super(props);
}
  render() {
    const SuperComponent = components[this.props.type];
    return (
      <View style={styles.container}>
        <SuperComponent/>
      </View>
    );
  }
}

从文件动态加载组件 - React native

0 个答案: