Typescript React App에서 특정 소품을 지정하고 일반적인 HTML 소품을 받아들입니다.

Typescript React App에서 특정 소품을 지정하고 일반적인 HTML 소품을 받아들입니다.

React Wrapper Component를 가지고 있습니다.이 컴포넌트는 일부 소품을 사용할 수 있지만 다른 모든 소품을 자 컴포넌트로 전송합니다(특히 className, id 등 네이티브 소품 관련).

하지만, 제가 원어민 소품들을 지나칠 때, 타이프 원고는 불평을 합니다.오류 메시지 참조:

TS2339: "IntrinsicAttributes & IntrinicClassAttributes < Wrapper > & Readonly < { children }타입에 "className" 속성이 존재하지 않습니다.React Node; }> & Readonly < Wrapper Props > 。

네이티브 소품도 사용할 수 있는 특정 소품을 갖춘 컴포넌트를 입수하려면 어떻게 해야 합니까?

코드는 다음과 같습니다.

interface WrapperProps extends JSX.IntrinsicAttributes {
  callback?: Function
}

export class Wrapper extends React.Component<WrapperProps>{
  render() {
    const { callback, children, ...rest } = this.props;
    return <div {...rest}>
      {children}
    </div>;
  }
}

export const Test = () => {
  return <Wrapper className="test">Hi there</Wrapper>
}

여기서도 비슷한 질문을 찾았습니다만, 기본적으로 타입 체크를 포기하고 있습니다.SO-Question 링크

어떻게 하는지 볼 수 있습니다.div소품 정의:

interface IntrinsicElements {
    div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
}

를 사용하는 경우React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>기본 유형으로서 우리는 모든 속성을 가질 것이다.div.부터DetailedHTMLProps덧붙이기만 하면 된다ref로.React.HTMLAttributes<HTMLDivElement>기본 인터페이스로 이것만 사용하여 모든 것을 얻을 수 있습니다.div속성:

interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
  callback?: Function
}

export class Wrapper extends React.Component<WrapperProps>{
  render() {
    const { callback, children, ...rest } = this.props;
    return <div {...rest}>
      {children}
    </div>;
  }
}

export const Test = () => {
  return <Wrapper className="test">Hi there</Wrapper> // works now
}

JSX.IntrinsicElements에는 다음과 같은 정보가 있습니다.

const FooButton: React.FC<JSX.IntrinsicElements['button']> = props => (
  <button {...props} className={`foo ${props.className}`} />
)

// alternative...
const FooButton: React.FC<React.PropsWithoutRef<
  JSX.IntrinsicElements['button']
>> = props => <button {...props} className={`foo ${props.className}`} />

react-typescript-cheatsheet 프로젝트에서 이를 발견했습니다.

봐주세요ComponentProps,ComponentPropsWithRef,그리고.ComponentPropsWithoutRef- 이것은 다음과 같은 일반적인 입력을 받아들입니다."div","button"또는 기타 컴포넌트.여기에는 다음과 같은 특정 반응 소품이 포함됩니다.className또, 다음과 같이 합니다.

import React, {
  forwardRef,
  ComponentPropsWithoutRef,
  ComponentProps,
  ComponentPropsWithRef
} from "react";

const ExampleDivComponent = forwardRef<
  HTMLDivElement,
  ComponentPropsWithoutRef<"div">
>(({ children, ...props }, ref) => {
  return (
    <div {...props} ref={ref}>
      {children}
    </div>
  );
});

<ExampleDivComponent
  className=""
  style={{ background: "green" }}
  tabIndex={0}
  onTouchStart={() => alert("touched")}
/>;

const ExampleButtonComponent: React.FC<ComponentProps<"button">> = ({
  children,
  ...props
}) => {
  return <button {...props}>{children}</button>;
};

<ExampleButtonComponent onClick={() => alert("clicked")} />;

제 동료가 알아냈어요.더 넓은 시야를 위해 공유:

interface ComponentPropTypes = {
  elementName?: keyof JSX.IntrinsicElements; // list of all native DOM components
  ...
}


// Function component
function Component({
  elementName: Component = 'div',
  ...rest,
  // React.HTMLAttributes<HTMLOrSVGElement>) provides all possible native DOM attributes
}: ComponentPropTypes & React.HTMLAttributes<HTMLOrSVGElement>)): JSX.Element {
  return <Component {...rest} />;
}

// Class component
class Component extends React.Component<ComponentPropTypes & React.HTMLAttributes<HTMLOrSVGElement>> {
  render() {
    const {
      elementName: Component,
      ...rest,
    } = this.props;
    return <Component {...rest} />
  }
}

언급URL : https://stackoverflow.com/questions/51835611/specify-specific-props-and-accept-general-html-props-in-typescript-react-app