Javascript 函数作为子函数无效。我在代码中找不到导致此错误的任何内容

我有一个具有大量逻辑的父组件，还有许多其他组件是只返回JSX方法的功能组件。我发现很多函数作为子错误无效，所以我对其进行了更改，以修复此错误，我认为将{FunctionalComponent}更改为{=>FunctionalComponent应该修复了这个问题，是的，大多数错误都消失了，但是还有一件事导致了这个错误。我试图调试我的代码，但是调试器没有进入Children的FunctionalComponents返回方法

我将在这里介绍主组件渲染方法和示例子组件。也许我做得不对，因为我以前没有使用功能组件

生成“我的过滤器”面板的快速过滤器的主组件渲染方法：

    generateQuickFilters = () => {
    return this.filterTypes.map(filter => {
        const options = {
            filter: filter,
            maxFilterOptions: this.state.maxFilterOptions,
            toggle: this.toggle,
            toggleCollapse: this.toggleCollapse,
            onShowMoreButtonClick: this.onShowMoreButtonClick,
            hoverIn: this.hoverIn,
            hoverOut: this.hoverOut,
            analytics: this.state.analytics
        };
        return (<QuickFilter options={options} key={UUID.UUID()}/>);
    });
}

render(): React.ReactNode {

    return (
        <div>
            {this.generateQuickFilters()}
            <QuickFiltersModal visible={this.state.isModalVisible} onConfirmClick={this.hideModal}/>
        </div>
    );
}

这是一个快速过滤器的外观：

export interface QuickFilterPropsOptions {
toggleCollapse: (subtype: any) => void;
toggle: (subtype: any) => void;
hoverIn: (subtype: any) => void;
hoverOut: (subtype: any) => void;
filter: any;
analytics: Analytics;
maxFilterOptions: number;
onShowMoreButtonClick: (subtype: any) => void;
}

export interface QuickFilterProps {
options: QuickFilterPropsOptions;
}

export class QuickFilter extends React.PureComponent<QuickFilterProps, {}> {

constructor(props: QuickFilterProps, context: any) {
    super(props, context);
}

render(): React.ReactNode {
    return (
        <>
            <div key={UUID.UUID()}>
                <div className='row'>
                    {() => QuickFilterHeader(this.props.options)}
                    {() => QuickFilterOption(this.props.options)}
                    {() => QuickFilterFooter(this.props.options)}
                </div>
            </div>
        </>
    );
}

例如，我将在这里粘贴使用其他功能组件的QuickFilterOption功能组件：

export function QuickFilterOption(props) {
return (
    <>
        <table>
            {() => OptionLabel(props)}
            {() => OptionSubtypeHeader(props)}
            <tbody>
                {() => OptionValues(props)}
            </tbody>
        </table>
    </>
);

这是创建元素DOM树的正确方法吗？知道是什么导致了这个错误吗？也许我不应该使用功能组件

编辑1：

export function OptionValues (props) {


const generateValue = () => {
    // For each subtype
    props.filter.subtypes.map((subtype) => {
        // Checkbox is disabled when it relates to a property that has no connections or calls
        const disabled = props.option.properties[subtype.property] === undefined; // || option.properties[subtype.property].calls === 0;
        // Checkbox is selected when it is disabled or has a selected property set to true
        const selected = disabled || props.option.properties[subtype.property].selected;

        const classNames: string[] = [];
        // Check if needed
        if (selected) {
            classNames.push('selected');
        }

        const optionValue = () => {
            if (selected) {
                props.option.properties[subtype.property].selected = true;
                props.updateQuickFilters$.next();
            } else {
                props.option.properties[subtype.property].selected = false;
                props.updateQuickFilters$.next();
            }
        };

        // TODO TOOLTIP
        return (
            <td>
                <div className={'ff-checkbox clickable'}><input type={'checkbox'} className={classNames.join(' ')}
                                                                disabled={disabled} onClick={optionValue}/></div>
            </td>);

    });
}

    return (
        <>
            {() => generateValue()}
        </>);

---

}

您可以在多个位置作为子级提供函数，例如在QuickFilter的渲染中：

中的子项都是函数。也许您的意思是：

<div className='row'>
    {QuickFilterHeader(this.props.options)}
    {QuickFilterOption(this.props.options)}
    {QuickFilterFooter(this.props.options)}
</div>

…虽然确实如此，但最好将其用作组件，对功能进行任何必要的更改以处理该问题，例如：

<div className='row'>
    <QuickFilterHeader options={this.props.options}/>
    <QuickFilterOption options={this.props.options}/>
    <QuickFilterFooter options={this.props.options}/>
</div>

---

您在QuickFilterOption中也有类似的功能。

它与Angular有什么关系？XD什么意思？我添加了Angular标记吗？我只添加了四个标记。现在只剩下两个XD@DominikZ-你有。没错，我错了。很有趣，因为我把它改成了{QuickFilterHeaderthis.props.options}我发现了更多的ReactChild错误：@DominikZ-您没有向我们展示QuickFilterHeader或QuickFilterFooter，但是如果QuickFilterOptions没有同样的问题，它可以像上面的第二个块一样使用。但是正如我上面指出的，这里真正正确的解决方案是让它们成为功能组件或类组件，并且将它们用作组件，而不是函数。等等，那么我实际的QuickFilterOption不是一个功能组件？我错过了什么使其成为功能组件？@DominikZ-是的，QuidckFilterOption看起来只是一个功能组件，而不是不必要的片段和在其子项中调用函数的错误。因此，如果您解决了这些问题在它里面，你应该可以使用它，等等。现在我知道是什么错误了。非常感谢你的时间！

<div className='row'>
    <QuickFilterHeader options={this.props.options}/>
    <QuickFilterOption options={this.props.options}/>
    <QuickFilterFooter options={this.props.options}/>
</div>