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

Posted 2023-02-21

【中文标题】在渲染函数中调用返回 JSX 元素的函数

【英文标题】：calling functions that return a JSX element in render function

【发布时间】：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() 中的语法不正确，它是为了向您展示我想要代码的样子。

【参考方案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>
);

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