代码之家 › 专栏 › 技术社区 › msqar

如何在react native中创建变量并将其设置为多行JSX结构

react-native

-2

msqar · 技术社区 · 5 年前

当我问这个问题的时候,我觉得自己很傻,但我真的找不到一个办法。我知道使用RETURN(…)是可能的;而且我也知道可以将其设置为单行JSX组件,但是如果我需要多行呢?

假设我有以下JSX结构:

<View>
   <FontAwesome5 solid name={'someicon'}/>
   <Text>This is some text</Text>
</View>

正如我所说,我可以做到:

return (
<View>
   <FontAwesome5 solid name={'someicon'}/>
   <Text>This is some text</Text>
</View>
);

但在这个函数中,我需要添加一些逻辑,并且需要创建一个变量来避免重复代码或函数调用。

尝试执行:

let result = ( ... );
let result = [ ... ];
let result = { ... };
let result = () => { ... };
let result = () => ( ... );

没用。

我怎样才能做到这一点?

1 回复 | 直到 5 年前

LayTexas 5 年前

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


export default class App extends React.Component {

constructor(props){
  super(props);

  this.itemsJSX = (
    <View>
       <Text>Hello World!</Text>
    </View>
  )
}

  render() {
      return (
        this.itemsJSX
      );
  }
}