时间戳

首页 > 解决方案 > 函数作为 React 子级无效。我在我的代码中找不到导致此错误的任何内容

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

问题描述

我有包含很多逻辑的父组件和许多其他组件，它们是仅返回 JSX 方法的功能组件。我收到了很多“函数作为 React 孩子无效”的错误，所以我进行了更改以修复此问题，我认为更改{FunctionalComponent}为{() => FunctionalComponent() 应该解决此问题，是的，大多数错误都消失了，但必须还有一件事导致此错误。我试图调试我的代码，但调试器没有进入子（功能组件）返回方法。

我将在这里介绍主要组件的渲染方法，以及示例子组件。也许我做错了，因为我之前没有使用功能组件。

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

    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()}
        </>);

}

标签： javascriptreactjs

解决方案

您有几个地方提供子功能，例如<div className='row'>in QuickFilter：render

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

里面的孩子<div className='row'>都是函数。也许你的意思是：

<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。

推荐阅读