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}，因为您当前没有返回值。

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

1 个答案: