Question

我的父组件具有很多逻辑，而许多其他组件是仅返回JSX方法的功能组件。我收到很多“函数不能作为React子代使用的错误”错误，因此我进行了更改以解决此问题，我认为将{FunctionalComponent}更改为{() => FunctionalComponent()应该可以解决此问题，是的，大多数错误消失了，但是还必须有另一件事导致此错误。我尝试调试我的代码，但调试器没有进入子级（功能组件）返回方法。

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

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

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

这是一个QuickFilter的外观：

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元素树的正确方法吗？知道是什么原因导致此错误吗？也许我不应该使用功能组件？

EDIT1：

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

}

Answer 1

您在几个地方提供子功能，例如<div className='row'>的{{1}}中的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>中有同样的事情。

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

1 个答案: