React 컴포넌트와 React 요소를 검출하는 방법

React 컴포넌트와 React 요소를 검출하는 방법

React.isValidElementReact 요소와 React 요소 모두에 대해 true를 검정합니다.오브젝트가 React 컴포넌트임을 구체적으로 어떻게 테스트해야 합니까?현재 테스트로 하고 있습니다.typeof obj.type === 'function'하지만 더 좋은 방법이 있었으면 좋겠어요

정말로 check를 입력하려는 경우

• 컴포넌트

• 클래스 대 기능 컴포넌트

• DOM 대 컴포지트 요소

이런 것도 해볼 수 있어요.

function isClassComponent(component) {
    return (
        typeof component === 'function' && 
        !!component.prototype.isReactComponent
    )
}

function isFunctionComponent(component) {
    return (
        typeof component === 'function' && 
        String(component).includes('return React.createElement')
    )
}

function isReactComponent(component) {
    return (
        isClassComponent(component) || 
        isFunctionComponent(component)
    )
}

function isElement(element) {
    return React.isValidElement(element);
}

function isDOMTypeElement(element) {
    return isElement(element) && typeof element.type === 'string';
}

function isCompositeTypeElement(element) {
    return isElement(element) && typeof element.type === 'function';
}

사용하다

// CLASS BASED COMPONENT
class Foo extends React.Component {
  render(){
      return <h1>Hello</h1>;
  }
}

const foo = <Foo />;

//FUNCTIONAL COMPONENT
function Bar (props) { return <h1>World</h1> }
const bar = <Bar />;

// REACT ELEMENT
const header = <h1>Title</h1>;

// CHECK
isReactComponent(Foo); // true
isClassComponent(Foo); // true
isFunctionComponent(Foo); // false
isElement(Foo); // false

isReactComponent(<Foo />) // false
isElement(<Foo />) // true
isDOMTypeElement(<Foo />) // false
isCompositeTypeElement(<Foo />) // true

isReactComponent(Bar); // true
isClassComponent(Bar); // false
isFunctionComponent(Bar); // true
isElement(Bar); // false

isReactComponent(<Bar />) // false
isElement(<Bar />) // true
isDOMTypeElement(<Bar />) // false
isCompositeTypeElement(<Bar />) // true

isReactComponent(header); // false
isElement(header); // true
isDOMTypeElement(header) // true
isCompositeTypeElement(header) // false

코드펜의 예

가장 간단한 해결책은 다음과 같습니다.

React.isValidElement(element)

@EmanualJade answer와 더불어 변수가 다음 변수인지 여부를 확인할 수 있습니다.function component

React.isValidElement(Component())

@Leonardo가 지적한 바와 같이 일부 컴파일러는 이 문제를 일으킬 수 있습니다.

String(component).includes('return React.createElement')

ReactComponent.prototype.isReactComponent = {};

/node_modules/react/lib/React Component.js 중 33개

npm을 사용하여 설치합니다.현시점에서는, 그 유효성을 확인할 수 있는 직접적인 방법은 없습니다.네가 하는 일은 옳다.

이것은 해답이 있는 오래된 질문이다.

이 문제에 직면하게 되면 아마도react-isNPM 패키지 페이지: https://www.npmjs.com/package/react-is

ref 전달, 요소 유형 확인을 위한 메모 등 세부사항을 고려한 공식 React 모듈입니다.

값이 요소 유형인지 확인하려면 다음 작업을 수행합니다.ReactIs.isValidElementType(obj)

React 컴포넌트인지 컴포넌트 배열인지 확인합니다.

// checks if the argument is a React component or an Array of components
const isReactComp = v => React.isValidElement(v) ||
    (
      Array.isArray(v) && 
      v.every(node => React.isValidElement(node))
    );

const App = ({children}) => isReactComp(children) + '\n\r';

// Render 
ReactDOM.render(<div>
  <App>hello</App>
  <App><i>hello</i></App>
  <App>{[<i key={1}>hello</i>]}</App>
</div>, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class Test extends React.Component {}

console.log(!!Test.prototype.isReactComponent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

개체 변수의 특정 인스턴스에 대해 어떤 클래스를 가지고 있는지 알고 싶다면 연산자 인스턴스...가 필요합니다.

function isHTMLElement(obj) {
    return (obj instanceof HTMLElement);
}

둘 다 테스트했습니다.document.createElement('div')(참일 가능성이 있음)<someReactJSComponent />(가짜).

instanceof는 JavaScript에서 강력하고 유용한 도구입니다.공식 MDN 문서를 참조하십시오.Mozilla Documentation Network: instance of

"연산자 인스턴스는 객체의 프로토타입 체인에 constructor.protype이 있는지 테스트합니다."

또한 위의 원칙을 입증하기 위해 코드 샌드박스와 함께 코드 샘플을 온라인으로 업로드했습니다.

온라인 코드 샌드박스:

https://codesandbox.io/s/kmxjq27ol5

코드:

function App() { return (//insert JSX here//);};
const app = App();
const ele = document.createElement("div");
const rootElement = document.getElementById("root");
ReactDOM.render(app, rootElement);
console.log(
  "Hello!  Is a React Component HTML???" +
    (app instanceof HTMLElement) +
    "|  Is an HTML element HTML???" +
    (ele instanceof HTMLElement) +
    "|"
);

코드 결과:

Hello!  Is a React Element HTML???false|  Is an HTML element HTML???true|

문제 없습니다(Chrome과 FF 테스트 완료).그냥 사용하다instanceof.

언급URL : https://stackoverflow.com/questions/33199959/how-to-detect-a-react-component-vs-a-react-element