如何在 React Native 中使用函数渲染组件

Posted 2023-02-21

【中文标题】如何在 React Native 中使用函数渲染组件

【英文标题】：How to render components using function in React Native

【发布时间】：2018-12-24 13:59:00

【问题描述】：

您好，我是 React native 的新手，并通过在渲染中调用函数来尝试渲染组件，但它似乎不起作用。

我的功能：

renderData = () => 
    this.state.data.map(x => 
      return (
         <View>
           <Text> x.data.title </Text>
         </View>
       )
    );
  ;

如果我这样做就可以：

  render() 

    return (
      <SafeAreaView style=styles.container>
        <Text style=styles.text>Enter Username</Text>
        this.state.data.map(x => 
          return <Text style=styles.bodyText> x.data.title </Text>;
        )
      </SafeAreaView>
    );
  

但不是这个：

  render() 

    return (
      <SafeAreaView style=styles.container>
        <Text style=styles.text>Enter Username</Text>
        this.renderData()
      </SafeAreaView>
    );
   
  

我不知道为什么它不适用于第二个代码

【参考方案1】：

那是因为你没有从renderData 返回任何东西来实际渲染。添加return语句：

return this.state.data.map(x => 
  return (
     <View>
       <Text> x.data.title </Text>
     </View>
   )
);

您实际上必须返回新的映射元素，以便在this.renderData() 中调用它时获得新元素。否则你正在做undefined，因为你目前没有返回值。