\'as\' 소품이 있는 React 구성 요소의 동적 HTML 태그-JS 튜토리얼-php.cn

\'as\' 소품이 있는 React 구성 요소의 동적 HTML 태그

Mary-Kate Olsen

풀어 주다： 2024-11-25 03:08:26

원래의

975명이 탐색했습니다.

재사용 가능한 <섹션> React가 포함된 컴포넌트입니다. 섹션 구성요소는 HTML

태그를 지정해야 합니다. 하드코딩했기 때문입니다. 그러나 경우에 따라

태그와 같은 다른 태그를 대신 사용할 수도 있습니다. HTML 태그.

이것은 HTML을 보다 의미있고 SEO 친화적으로 만들고자 하는 일반적인 시나리오입니다.

해결책은 소비자가 구성 요소를 렌더링하는 데 사용할 HTML 태그를 결정하도록 하는 것입니다.

"as" 소품

이것은 새로운 것이 아닙니다.

이는 구성 요소를 렌더링하는 데 사용해야 하는 HTML 태그를 동적으로 결정할 수 있는 업계 표준 "접근 방식"입니다. Chakra UI, Material UI 등 많은 React 컴포넌트 라이브러리에서 사용됩니다.

"as" 소품이 없으면 각 사용 사례에 대해 별도의 구성 요소를 만들어야 하는데 이는 의미가 없습니다. 하지 마세요!

"as" prop을 사용하는 방법은 다음과 같습니다

import { Section } from './section';

const App = () => {
  return (
    <div>
      <Section as="section">CTA</Section>
      <Section as="article">My Article</Section>
      <Section>This use the default HTML tag of the component</Section>
    </div>
  );
};

로그인 후 복사

그리고 이것이 컴포넌트 정의입니다

type SectionProps = {
  as?: React.ElementType,
  children: React.ReactNode,
}

export const Section = (props: SectionProps) => {

  const { as: Tag = 'div', children } = props;

  return <Tag>{children}</Tag>;

}

로그인 후 복사

"as" 소품에 대한 Typescript 지원

React는 Typescript 유형에 도움이 됩니다.

React에서 제공하는 typescript의 React.ElementType 유형을 사용하면 다음과 같이 IDE에 대한 자동 완성 기능을 얻을 수 있습니다

Dynamic HTML Tag in React Components with the

React.ElementType의 대안으로 사용할 수 있습니다

type SectionProps = {
  as?: keyof JSX.IntrinsicElements,
  children: React.ReactNode,
}

로그인 후 복사

또는

type SectionProps = {
  as?: keyof HTMLElementTagNameMap,
  children: React.ReactNode,
}

로그인 후 복사

위 내용은 \'as\' 소품이 있는 React 구성 요소의 동적 HTML 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!