ts报错 className不存在

Question

类型“IntrinsicAttributes & IntrinsicClassAttributes<ClickOutside> & Pick<Readonly<ClickOutsideProps> & Readonly<...>, "onClickOutside" | "children"> & Partial<...> & Partial<...>”上不存在属性“className”

<ClickOutside
                className="user-blacklist-dialog"
                onClickOutside={this.props.onClickOutside} 
                exclude={this.props.exclude}
            >
                <div className="user-blacklist-dialog__title">{t("liveroom_black_list_manager")}</div>
                <div className="user-blacklist-dialog__divider" />
                <div className="user-blacklist-dialog-content">
                    {component}
                </div>
            </ClickOutside>

`

不明白呀

Answer 1

1. 将ts后缀改为tsx，就像js和jsx的区别~

https://stackoverflow.com/que...

1. 你可以试试看是不是因为你的组件上没有className这个属性，在定义组件的地方应该加上这个属性的定义；

定义

import React, { MouseEvent, ReactNode } from 'react';
interface Props = { 
onClickOutside(e: MouseEvent<HTMLElement>): void 
className: string } 

const ClickOutside = ({ onClickOutside: handleClick, className }: Props) => ( <button onClick={handleClick} className={className}></button> )

export default ClickOutside;

引用
<ClickOutside
                className="user-blacklist-dialog"
                onClickOutside={this.props.onClickOutside} 
                exclude={this.props.exclude}
            >