React - Warning:函数作为React子级无效。如果从render返回一个组件而不是< Component />,可能会发生这种情况

Question

假设我有一个需要函数的组件，它应该返回一些基于我在< code>filterTypesArray中接收的生成的“DOM”结构。然后我想在我的类的返回函数中使用< code>{generateInputs}来呈现它。它给了我一个警告。为了避免这种情况，我必须在< code>render函数中将这种类型的逻辑实现为某个< code>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

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

尝试调用该方法：

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