Question

我创建了一个tsx react组件，如下所示：

export interface FABProps { onClick: Function; children?: any; otherProps?: any }
export interface FABState { onZoomButtonClick?: Function; }

export default class FAB extends React.Component<FABProps, FABState> {
    static getInitialState() {
        return {onZoomButtonClick: undefined};
    }

    render() {
        let {onClick, children, ...otherProps} = this.props;

        return (
            <div className="right" style={{"padding" : "24px"}}>
                <a className="btn-floating btn-large blue-grey darken-4"
                   onClick={onClick} {...otherProps}>
                    {children}
                </a>
            </div>
        )
    }
}

并像这样使用它：

  <FAB id="layout-zoom-button" onClick={this.onZoomButtonClick}></FAB>;

然后我在webpack中收到此错误：

(27,18): error TS2339: Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FAB> & FABProps & { children?: ReactElement<any> |

我如何支持传递多个组件属性，例如typescript组件中的id属性？我在webpack中使用带有ts-loader的typescript 2

Answer 1

您可以通过将id属性添加到FABProps界面来修复它：

export interface FABProps {
    id: string;
    onClick: Function; 
    children?: any; 
    otherProps?: any
}

Typescript - 传递多个组件属性

1 个答案: