为什么会收到警告：函数作为React子代无效

Question

当我尝试调用返回map方法结果的方法时，出现以下错误，Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render但我不知道为什么。这是我的代码：

renderAlbums() {
        return this.state.albums.map(album => <Text>{ album.title }</Text>);
    }

    render() {
        return (
            <View>
                { this.renderAlbums }
            </View>
        );
    }

但是我上面的代码我看不出问题的根源，但是当我尝试在我的render()方法中创建一个变量的map()方法时，一切都很好：

render() {
  const c=this.state.albums.map(album => <Text>{ album.title }</Text>);
    return (
        <View>
            { c }
        </View>
    );
}

我想了解为什么renderAlbums()在这里调用render 方法时它不起作用<View>{ this.renderAlbums }</View>。

而且对我来说似乎更奇怪的是，当我尝试用括号称呼renderAlbums()这样的东西<View>{ this.renderAlbums() }</View>时它起作用了，所以我真的很困惑

Answer 1

警告：函数作为React子元素无效。如果您返回Component而不是从render返回，则可能会发生这种情况

基本上，React期望React Elements呈现它。

在当前脚本中，this.renderAlbums是一个函数引用，该函数引用不返回任何值。React Element函数本身不响应元素。因此，React无法呈现this.renderAlbums。

<View>
   { this.renderAlbums }
</View>

正确方法：

<View>
   { this.renderAlbums() } //it will return react element which can be rendered.
</View>

Answer 2

this.renderAlbums是指实际函数本身，而this.renderAlbums()实际上是执行函数并因此表示函数的返回值。