在渲染内的if语句中执行内容[重复]

Question

我想执行 if 语句中的所有行但我不能

这是我的代码

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class test extends Component {
  constructor() {
    super();
    this.state = { data: [] };
  }
  testFunction = () => {
    return (
      <View>
        <Text>Anything</Text>
      </View>
    );
  };

  render() {
    return (
      <View>{data.length > 0 ? <Text>Hi</Text> : this.testFunction() <Text>Hello</Text>}</View>
    );
  }
}
export default test;

我想执行 (this.testFunction()) 和 (<Text>Hello</Text>)

谢谢

Answer 1

你可以这样做：

render() {
  //Is data initialized?
  if (data.length > 0) 
    return (
      <Text>Hi</Text>
    )
  else 
    return (
      {this.testFunction()}
      <Text>Hello</Text>
    )
    
}

但还有更好的方法。例如，通过这种方式，您可以保持渲染函数更干净：

conditionalRender() {
  //Is data initialized?
  if (data.length > 0) 
    return (<Text>Hi</Text>)
  else 
    return (
      {this.testFunction()}
      <Text>Hello</Text>
    )  
}


render() {
  return (
    {this.conditionalRender)}
  )
}

Answer 2

您可以修改您的函数，使其返回组件。

 condition1 () {
  // do something 
  return ( <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />);
 }

 condition2 () {
  // do something 
  return ( <Text>Hello</Text>);
 }

并在渲染中调用它

render() {
 return (
  <View> { data.length > 0 ? this.condition1() : this.condition2()} </View>
)}