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

Question

嗨，我是React Native的新手，可以通过在render中调用一个函数来尝试渲染组件，但是它似乎不起作用。

我的功能：

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>
    );
   }
  }

我迷失了为什么它不能与第二个代码一起使用

Answer 1

那是因为您没有将任何内容从renderData返回到实际渲染。 添加一个返回语句：

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

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