用打字稿反应==>没有重载匹配这个调用答案

【问题标题】：React with typescript ==>No overload matches this call用打字稿反应==>没有重载匹配这个调用
【发布时间】：2021-12-30 19:16:47
【问题描述】：

我在截图中遇到错误 error_2 这里 AgGridReact 是从我在代码顶部导入的 ag-grid-react 库中导入的。所以我想问一下如何声明 AgGridReact 的接口，因为它不是组件。如果它是普通组件，那么它只需声明接口并在其中声明道具会很容易

下面是我的代码

import React, { Component } from 'react';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import './Grid.scss';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

type MyProps = {
    className:any
    rowData:any
    columns:any
    updateRecord:any
    onDeleteRecord:any
    noHoverEffect:any 
    gridOptions:any
    onRowEditingStopped:any
};

type MyState = {
};

export default class Grid extends Component<MyProps, MyState> {
    constructor(props:MyProps) {
        super(props);
        this.state = {};
    }


    onCellClicked = (params:any) => 
    {
        // Handle click event for action cells
        if (params.column.colId === "Action" && params.event.target.dataset.action) 
        {
            let action = params.event.target.dataset.action;

            if (action === "update") 
            {
                this.props.updateRecord(params.node.data.id, params.node.data.name, params.node.data.description, params.node.data.created, params.node.data.created_By);
            }

            if (action === "delete") {
                this.props.onDeleteRecord(params.node.data)

            }
        }
    }

    render() {
        const gridOptions = {
            getRowStyle: (params:any) => {
                if (params.node.rowIndex % 2 === 1) {
                    return { background: '#ebebeb73' };
                }
            },
        };

        
        return (
            <div className={["sct-grid", this.props.className, this.props.noHoverEffect && "nohover"].filter(Boolean).join(" ")}>
                <AgGridReact gridOptions={gridOptions}
                    alignedGrid="true"
                    suppressDragLeaveHidesColumns={true}
                    pagination={true}
                    paginationPageSize={7}
                    rowData={this.getitems()}
                    onRowEditingStopped={this.onRowEditingStopped}
                    onRowEditingStarted={this.onRowEditingStarted}
                    onCellClicked={this.onCellClicked}
                    editType="fullRow"
                    suppressClickEdit={true}
                    enableRangeSelection={true}
                    columnDefs={this.props.columns}

                >

                    {/* { this.getColumns()}*/}

                </AgGridReact>
            </div>
        );
    }

    getitems() {
        return this.props.rowData;
    }



    getColumns() {
        var listOfColumns :any = [];
        if (this.props.columns) {
            this.props.columns.forEach((column:any) => {
                listOfColumns.push(<AgGridColumn key={column} minWidth="80" maxWidth="120" field={column.field} sortable={column.sortable} filter={column.filter}></AgGridColumn>);
            });
        }
        return listOfColumns;
    };
};

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

在the documentation 之后，您需要将getRowStyle 属性添加到AgGridReact 组件，和/或始终从gridOptions 中的getRowStyle 函数返回样式。因为现在，如果您的条件 if (params.node.rowIndex % 2 === 1) 返回 false，getRowStyle 函数将返回 undefined（如果查看错误消息，AgGridReact 显然不喜欢）。

【讨论】：