在渲染函数中调用返回 JSX 元素的函数答案

【问题标题】：calling functions that return a JSX element in render function在渲染函数中调用返回 JSX 元素的函数
【发布时间】：2020-03-09 20:19:03
【问题描述】：

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

问题是这种技术不适用于多个 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() 中的语法不正确，它是为了向您展示我想要代码的样子。

【问题讨论】：

标签： javascript reactjs react-native coding-style

【解决方案1】：

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

【讨论】：

【解决方案2】：

问题出在您的返回中您忘记将函数包装在 {braces} 中。请参阅How to Call a Function inside a Render in React/Jsx 以获得更好的解释。

改成：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：