React自定义组件默认标签属性添加

2022-06-1579次阅读React

React自定义组件默认标签属性添加,...rest把组件默认标签属性传递下来。如果组件内有相同属性,则组件内属性值为最终值,除非例如className,onClick那样去处理继承全并属性值

//HTMLElement|TMLLinkElement|HTMLInputElement....
type HTMLProps = HTMLAttributes<HTMLDivElement>;


type OwnerProps = {
    // data: pdfDataType;
    // render?: (loading: boolean) => ReactNode;
    // position_id?: number;
};

type Props = Readonly<HTMLProps & OwnerProps>;
const ContentNone: FC<Props> = memo(({children, className,onClick, ...rest}) => {
    const clickHander = (event: React.MouseEvent<HTMLDivElement>): void => {
        onClick?.(event);
        console.log('22222');
    };
    return (
        <div className={classNames(className, styles.container)} {...rest} onClick={clickHander}>
            <NoneIcon />
            {children}
        </div>
    );
});

export default ContentNone;

组件引用:

<ContentNone className={styles.bg}  onClick={()=>console.log('222222')}>无搜索结果,建议修改关键词</ContentNone>

 

上一篇: 如何解决使用useEffect React Hook缺少依赖项警告  下一篇: js实现页面刷新后滚动到页面顶部  

React自定义组件默认标签属性添加相关文章