在渲染函数中调用 return JSX 元素的函数

Question

我正在尝试通过调用包含独立 JSX 元素的 class 方法来缩短 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() 中的语法不正确，这是为了向您展示我希望代码的样子。

Answer 1

问题出在你的 return 你忘记用 {braces} 包装你的函数。请参阅以获得更好的解释。

改为：

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

Answer 2

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

但是您可以制作自己的组件并导入它们，而不是那样做。

Answer 3

您的错误指出：您在 <Text> 组件之外有字符串文本。在您的代码中，您的 header 文本和逗号 ( , ) 是问题所在。修复方法如下：

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

在渲染函数中调用 return JSX 元素的函数

calling functions that return a JSX element in render function

javascript

coding-style

reactjs

react-native