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

Question

假设我有我想要函数的组件，它应该返回一些基于我在filterTypesArray. 然后我想{generateInputs}在我的班级中使用返回函数来渲染它。它向我发出标题警告。为了避免这种情况，我必须在render函数中实现这种类型的逻辑作为 some 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>
    );
}}

Answer 1

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

尝试调用该方法：

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