reactjs - 为什么我收到警告 : Functions are not valid as a React child?

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()方法在这里<View>{ this.renderAlbums }</View> .

对我来说更奇怪的是，当我尝试调用 renderAlbums() 时像这样<View>{ this.renderAlbums() }</View>带括号就可以了。

Answer 1

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render

基本上，React 期待 React Elements渲染它。

在当前脚本中，this.renderAlbums 是一个函数引用，它不返回任何 React Element函数本身不 react 元素。因此，React无法渲染this.renderAlbums。

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

正确方法:

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