javascript - 调用在render函数中返回JSX元素的函数

我试图通过调用包含隔离的JSX元素的类方法来减少render()方法的长度，以提高可读性。

问题在于，该技术不适用于多个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()中的语法不正确，这是向您显示我希望代码看起来像什么。

最佳答案

您的错误指出：您在<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>
);