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

【问题标题】：How to render components using function in React Native如何在 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>
    );
   }
  }

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

【问题讨论】：

标签： javascript react-native

【解决方案1】：

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

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

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

【讨论】：