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