React 및 JSX에서 동적 구성 요소 이름을 렌더링하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-17 13:52:02
원래의
246명이 탐색했습니다.

How to Render Dynamic Component Names in React and JSX?

React 및 JSX의 동적 구성 요소 이름

React에서 동적 구성 요소 렌더링을 사용하면 런타임 시 유형에 따라 구성 요소를 생성할 수 있습니다. 이를 설명하기 위해 다음 예를 고려하십시오.

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />
로그인 후 복사

React/JSX 동적 구성 요소 이름 스레드에서 제안된 이전 솔루션에서는 구문 차이로 인해 컴파일 오류가 발생했습니다. 대안으로 각 구성 요소에 대해 별도의 메서드를 생성할 수도 있습니다.

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}
로그인 후 복사

그러나 이 접근 방식에는 각 구성 요소에 대해 새로운 메서드가 필요하므로 번거로울 수 있습니다.

다행히도 다음과 같은 방법이 있습니다. 구성 요소 유형을 문자열로 React.createElement() 함수에 전달하는 보다 우아한 솔루션입니다. 이 함수는 제공된 유형을 사용하여 구성 요소를 렌더링합니다. 예:

var MyComponent = Components[type + "Component"];
return <MyComponent />;
로그인 후 복사

이 코드는 다음과 같이 컴파일됩니다.

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});
로그인 후 복사

위 내용은 React 및 JSX에서 동적 구성 요소 이름을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿