javascript - Konvertera FC till [ 'new() => any' ]

Jag försöker implementera ett anpassat filter för AgGridReact och jag försöker tilldela det till:

frameworkComponents: {
   newcustomFilter: CustomFilter
},

Jag får ett fel:

Type '(props: any) => JSX.Element' is not assignable to type 'new () => any'.
  Type '(props: any) => Element' provides no match for the signature 'new (): any'.ts(2322)

Hur konverterar jag min FC-komponent till new() => any?

Jag försökte skapa en React Function Component. Den implementerar alla metoder i gränssnittet IFilterComp. Nedan är utdraget på hur jag tilldelade till grid:columnDefs-egenskapen.

 columnDefs: [
    {
    headerName: 'PRICE',
    field: WATERFALL_COLUMN_IDS.PRICE,
    colId: WATERFALL_COLUMN_IDS.PRICE,
    minWidth: 70,
    width: 92,
    hide: false,
    *filter: CustomFilter,*
    filterParams: {
      title: 'Year Filter',
      values: [2000,2004,2006]
    },

Men när jag tilldelar filteregenskapen misslyckas det.

Type '(props: any) => JSX.Element' is not assignable to type 'new () => any'.
  Type '(props: any) => Element' provides no match for the signature 'new (): any'.ts(2322)

Kod för anpassat filter

import React from 'react'
import { useEffect, useState } from "react";
import { render } from "react-dom";

const customFilter = (props:any):any => {   

    const constructor = () => {
        // your logic will go here ..
        }

    const [filterState, setFilterState] = useState('off');

    useEffect( ()=> {
        console.log(props.title + ' filter created');
        return ()=> console.log(
                    props.title + ' filter destroyed');
    }, []);

    useEffect( ()=> 
                {
                    props.filterChangedCallback()
                    console.log('Hello World')
                },
                [filterState]);

    const handleChange = (e:any) => {
        console.log(e.target.value);
        setFilterState(e.target.value)
    }



    const isFilterActive = () => {
        return filterState!='off';
    }

      // @ts-ignore
    const doesFilterPass = (params) => {
          // @ts-ignore
        const field = props.colDef.field;
        return params.data[field] == filterState;
    }
    
    const getModel =() => {
        if (filterState=='off') { 
            return undefined;
        }
        return {
            state: filterState
        }
    }
      // @ts-ignore
    const setModel = (model) => {
        console.log('Set Model is called')
        if (model==null) {
            setFilterState('off');
        } else {
            setFilterState(model.state);
        }
    }
    
    const getModelAsString = () => {
        return filterState=='off' ?
                '' : filterState;
    }
    
    const onNewRowsLoaded = () => {
        console.log('new rows were loaded');
    }
    
    const onAnyFilterChanged = () => {
        console.log('another filter was changed');
    }

    const afterGuiAttached = () => {
        console.log('focus something???');
    }   

   
    return (
        <div>
            <div className='filter-title'>{props.title}</div>
            <div className='filter-state'>
                State = {filterState}
            </div>
            <div className='filter-entry'>
                <button 
                    onClick={()=>setFilterState('off')}>
                        Off
                </button>
            </div>
            
            <select onChange={handleChange}>
                {props.values.map((option:any) => (
                    <option key={option.value} value={option.value}>
                        {option.text}
                    </option>
                ))}
            </select>
        </div>
    );
    
    

}

Svar #1

Försök att använda as-nyckelordet så här:

frameworkComponents: {
   newcustomFilter: (CustomFilter as any)
},

om din linter inte är nöjd och verkligen vill ha en new() => any, ge den bara det den vill ha:

const customFilter = new (props: any) => {