React/JSX에서 구성 요소를 동적으로 렌더링하는 방법은 무엇입니까?

React/JSX의 동적 구성 요소 렌더링

React의 JSX는 선언적 구성 요소 렌더링을 허용하지만 때로는 개발자가 다음을 기반으로 구성 요소를 동적으로 렌더링해야 할 수도 있습니다. 해당 유형입니다.

문제

아래 코드 조각을 사용하여 구성 요소를 동적으로 렌더링하려고 하면 오류가 발생합니다.

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

JSX에서는 XML을 기대하지만 코드에서는 배열 구문을 사용하기 때문에 오류가 발생합니다. 각 구성 요소에 대한 메서드를 만드는 것과 같은 다른 솔루션은 우아하지 않습니다.

솔루션

이제 React 문서는 동적 구성 요소 렌더링을 위한 공식 솔루션을 제공합니다.

const MyComponent = Components[type + "Component"];
return <MyComponent />;

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

const MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

MyComponent 변수는 구성 요소 클래스를 저장하며 대문자로 표시됩니다. 그런 다음 React.createElement 함수는 이 클래스를 사용하여 구성 요소 요소를 생성합니다.

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