콘솔에서 리액트 요소의 소품 및 상태를 검사하려면 어떻게 해야 합니까?

콘솔에서 리액트 요소의 소품 및 상태를 검사하려면 어떻게 해야 합니까?

React Developer Tools는 React 컴포넌트 트리를 검사하고 소품, 이벤트 핸들러 등을 확인할 수 있는 강력한 기능을 제공합니다.다만, 브라우저 콘솔에서 이러한 데이터 구조를 검사할 수 있도록 하고 싶습니다.

에서는 Chrome을 사용하여 할 수 .$0를 React에서 할 수 있는 $0리액트 개발 툴?

사용할 수 있는 React Developer Tools 사용$r선택한 반응 구성 요소에 대한 참조를 가져옵니다.

은 내가 하는 것을 .React Developer Tools요소를 고르다Explorer라는 이름의 .라는 이름의 스테이트 오브젝트가 있습니다.nodeList 「이렇게 하면 」라고 쓸 수 되었습니다$r.state.nodeList을 사용하다품품:(((((((((( （ : : ）$r.props.path

당신의 질문에 대한 답변은 제가 질문한 것과 유사한 질문에서 찾을 수 있습니다.반응 - 디버깅을 위해 DOM 요소에서 구성 요소를 가져옵니다.

중복으로 표시하거나 위에 코멘트를 다는 데 필요한 평가점이 없기 때문에 답변을 드립니다.

기본적으로 이것은 TestUtils를 활용하여 목표를 달성할 수 있기 때문에 반응 개발 빌드를 사용하는 경우에 가능합니다.

다음 두 가지 작업만 수행하면 됩니다.

• React.render()에서 가져온 루트 수준 구성 요소를 정적으로 저장합니다.
• 스태틱 컴포넌트에 액세스하는 $0 콘솔에서 사용할 수 있는 글로벌 디버깅 도우미 기능을 만듭니다.

따라서 콘솔의 코드는 다음과 같습니다.

> getComponent($0).props

에서는 get Component를 사용할 수 .React.addons.TestUtils.findAllInRenderedTree검출된 모든 컴포넌트에서 getDOMName을 호출하여 전달된 요소에 대해 대조함으로써 일치하는 항목을 검색합니다.

콘솔(Firefox, Chrome)을 열고 DOM 요소로 렌더링된 reactjs를 찾거나 js 스크립트를 실행하여 찾습니다.

document.getElementById('ROOT')

그런 다음 오브젝트 속성 뷰어에서 '_reactInternalInstace$....'와 같은 이름의 속성이 있는지 확인합니다. _DebugOwner를 확장하고 stateNode를 참조하십시오.

발견된 stateNode에는 reactjs 앱에서 많이 사용되는 'state' 및 'props' 속성이 포함됩니다(있는 경우).

받아들여진 답변은 효과적이고 훌륭한 방법이지만, 2020년에는 많은 검사를 할 수 있게 되었습니다.$r방법.React DevTools의 Components 탭에는 관련 컴포넌트를 선택할 때(적절한 수준인지 확인), Suspend(일시정지) 또는 일치하는 DOM 요소(오른쪽 상단에 있는 작은 아이콘)를 확인할 수 있습니다.

창 개체에 상태 또는 프로펠러 개체를 할당합니다.

window.title = this.state.title

그런 다음 개발 도구 콘솔에서 노출된 개체에 대해 다음과 같은 다양한 방법을 시도할 수 있습니다.

window.title.length

8

참조를 다음과 같이 창 개체에 첨부할 수 있습니다.

import { useSelector } from "react-redux";
function App() {

    // Development only
    window.store = useSelector((state) => state);

    return (
        <div className="App">
        </div>
    );
}

export default App;

그런 다음 콘솔에서 액세스합니다.

store
{states: {…}}
states:
someProperty: false
[[Prototype]]: Object
[[Prototype]]: Object

[콘솔] [1] [1] : https://i.stack.imgur.com/A4agJ.png

언급URL : https://stackoverflow.com/questions/29155044/how-do-you-inspect-a-react-elements-props-state-in-the-console