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 중국어 웹사이트의 기타 관련 기사를 참조하세요!