React - 警告：函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况答案

【问题标题】：React - Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from renderReact - 警告：函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况
【发布时间】：2018-11-22 19:16:22
【问题描述】：

假设我有我想要函数的组件，它应该根据我在filterTypesArray 中收到的返回一些生成的“DOM”结构。然后我想在我的类中使用{generateInputs} 作为返回函数来渲染它。它向我抛出了标题警告。为了避免这种情况，我必须在render 函数中实现这种类型的逻辑，就像const 一样。我是新来的反应，我不完全明白为什么会这样。从那个警告信息来看，我并不聪明。

有人能解释一下为什么它会引发警告消息吗？

import * as React from "react";

interface IGridFilter {
    filterTypesArray: any[];
}

type GridFilterProps = IGridFilter;

export default class GridFilter extends React.PureComponent<GridFilterProps, {}>{
    constructor(props) {
        super(props)
    }

//here I want to do some logic and return some "DOM elements"
generateInputs = () => {
    return (
        <div> TEST </div>
    );
}
render() {
    //to avoid warning message I have to 
    //const generateInputs = this.props.filterTypesArray.map((input) =>
    //    <div>test</div>
    //);
    return (
        <div>
            {generateInputs}
        </div>
    );
}}

【问题讨论】：

标签： reactjs

【解决方案1】：

你没有调用generateInputs，因此你的渲染方法中有一个函数引用，React 不知道如何渲染。

尝试调用方法：

return (
    <div>
        {generateInputs()}
    </div>
);

【讨论】：

啊，是的，这是我的愚蠢错误，谢谢。会接受的时候我可以