вызов функций, которые возвращают элемент JSX в функции рендеринга

Я пытаюсь уменьшить длину метода render(), чтобы улучшить читаемость, вызывая методы класса, содержащие изолированные элементы JSX.

Проблема в том, что этот метод не будет работать более чем для одного элемента JSX.

Я встроил каждый элемент в <View>, но это не предотвращает эту ошибку.

Invariant Violation : Text strings must be rendered within a <Text> component.

import React, { Component } from 'react';
import { Text, View,StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }})

export default class HelloWorldApp extends Component {
    header() {
        return  (
            <Text>header</Text>
        );

    }
    firstElement() {
        return (
                <Text>first element</Text>
        );

    }
    secondElement() {
        return (
            <Text>second element</Text>
        );

    }

    footer(){
        return (
            <Text>footer</Text>
        );
    }

    render() {

     let header  = this.header();
     let firstElement = this.firstElement();
     let secondElement= this.secondElement();
     let footer = this.footer();

        return (
            <View style={styles.container}>
                header,
                firstElement,
                secondElement,
                footer,
            </View>

        );

    }


}

Я знаю, что синтаксис в render() неверен, я хочу показать вам, как должен выглядеть код.


react-native reactjs javascript coding-style
person 2mk    schedule 13.11.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ваша ошибка гласит: у вас есть строковый текст вне компонента <Text>. В вашем коде проблема заключается в текстах заголовков и запятых ( , ). Вот как это исправить:

return (
    <View style={styles.container}>
        {header}
        {firstElement}
        {secondElement}
        {footer}
        // or you can directly use your functions
        /*
        {this.header()}
        {this.firstElement()}
        {this.secondElement()}
        {this.footer()}
        */
    </View>
);

P/s: Если вы все еще не понимаете, почему вы получили ошибку, вы можете попробовать это:

return (
    <View style={styles.container}>
        <Text>
            header
            firstElement,
            secondElement,
            footer,
        </Text>
    </View>
);
person Minh Dao    schedule 14.11.2019

arrow_upward
1
arrow_downward

Проблема была в вашем возврате. Вы забыли обернуть свои функции в {braces}. См. Как вызвать функцию внутри рендеринга в React/Jsx для лучшего объяснения.

Измените его на:

    return (
      <View style={styles.container}>
        {header}
        {firstElement}
        {secondElement}
        {footer}
      </View>
    );
person Eliya Cohen    schedule 13.11.2019

arrow_upward
0
arrow_downward 

return (
    <View style={styles.container}>
         {header()}
         {firstElement()}
         {secondElement()}
         {footer()}
    </View>
);

но вместо этого вы можете просто сделать свои собственные компоненты и импортировать их.

person get2dachoppa    schedule 14.11.2019