oldcodes

리액트 테스트 라이브러리에서 id별로 요소 찾기 리액트 테스트 라이브러리(Libarary)를 사용하여 리액트 애플리케이션을 테스트하고 있습니다.어떤 이유에선지, 다음 방법으로 원소를 찾을 수 있어야 해id가 아니라data-testid문서에서는 이를 달성할 방법이 없습니다. 이것을 달성할 수 있는 방법이 있나요? 출력은 다음과 같습니다. const dom = render(); 다음과 같은 것을 찾고 있습니다. const input = dom.getElementById('firstinput'); //or const input = dom.getById('firstinput'); 어떤 답변도 완전한 해결책을 제시하지 못한 것 같습니다.다음은 예를 제시하겠습니다. const result = render(); co..

React.js의 OnClick 이벤트 바인딩 에게 divid,그 또는 의 자 하면 "div"가 .div을 사용하다제가 어디서 실수를 하고 있는지 알려주세요.을 사용하다 viewMore: function(i,j){ console.log('You clicked: ', i ); }, render : function(){ var attributeId = "groups_"; attributeId+= index; return( //parent div Group Name: My Name POC Key Attributes: POC 1 ) }; viewMore = (i,j) => () => { console.log(i,j) } 이벤트 핸들러에게 파라미터를 전달하려면 카레링을 사용해야 합니다.위의 방법에서는 렌더가 호출..

ReactJS - javascript를 사용하여 컴포넌트의 displayName에 접속하려면 어떻게 해야 합니까? React 컴포넌트를 만들고 있는데 렌더링 중인 컴포넌트의 유형을 콘솔에 기록하고 싶은 경우가 있습니다.displayName컴포넌트 이름을 표시할 때 사용합니다. 컴포넌트의 컨텍스트에서 액세스하려면displayName부동산? 예를 들어, 어떻게 하면,console.logdisplayName 컴포넌트를 나타내는 스테이트먼트를 나타냅니다. var Hello = React.createClass({ displayName: 'HeyHey', render: function() { console.log(this.displayName); return Hello {this.props.name}; } }); ..

'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다. 리액트 앱 4.0을 만들기 위해 프로젝트를 업데이트했고, 파일을 TypeScript로 옮기는 것이 늦어지고 있습니다.이 새로운 버전에서는 React에서 React를 반복 Import할 필요가 없다는 것을 알고 있습니다.그러나 React를 Import하지 않은 모든 TS 파일에는 다음 오류가 표시됩니다. 'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다.대신 Import를 추가하는 것을 검토해 주십시오.ts(2686) React를 수입하면 고칠 수 있다는 것은 알지만, 더 이상 필요없다고 생각했습니다.또, 이 에러의 의미를 설명해 주실 수 있습니까? 기본 TSX 파일 const Users = () => { return Te..

재담을 사용하여 모듈을 조롱하고 함수 호출을 테스트할 수 없습니다. create-app-component를 사용하여 프로젝트를 만듭니다.create-app-component는 빌드 스크립트(babel, webpack, jaste)로 새로운 앱을 구성합니다. 테스트하려는 React 컴포넌트를 작성했습니다.컴포넌트에 다른 javascript 파일이 필요하며 함수가 노출됩니다. 내 검색.js 파일 export { search, } function search(){ // does things return Promise.resolve('foo') } 내 반응 구성요소: import React from 'react' import { search } from './search.js' import SearchResul..

react.createContext 포인트 of defaultValue? React 16 Context 문서 페이지에는 다음과 같은 예가 있습니다. const defaultValue = 'light' const SomeContext = React.createContext(defaultValue) const startingValue = 'light' const App = () => ( Content ) 아무래도...defaultValue쓸모없기 때문입니다.startingValue다른 것을 설정하거나 설정하지 않음(즉,undefined)는 덮어씁니다.괜찮아, 그래야지. 하지만 그게 무슨 의미가 있죠?defaultValue? 변하지 않는 정적 콘텍스트를 원하는 경우 다음과 같은 작업을 수행할 수 있고 프로바이..

react useRef를 사용하는 대상 DOM이 맵에서 어떻게 표시되는지 리액션이 있는 일련의 DOM 요소를 취득하기 위한 솔루션을 찾고 있습니다.useRef()갈고리를 채우다 예: const Component = () => { // In `items`, I would like to get an array of DOM element let items = useRef(null); return {['left', 'right'].map((el, i) => )} } 어떻게 하면 좋을까요? useRefReact와 부분적으로 비슷합니다.ref(필드의 필드만 있는 객체의 구조만current). useRef훅은 렌더링 사이에 데이터를 저장하고 데이터가 재연결을 트리거하지 않도록 변경하는 것을 목표로 합니다(다른 것과 ..

리액트 훅을 사용하여 쿼리 파라미터를 삭제하려면 어떻게 해야 합니까? 컴포넌트 기반 클래스의 쿼리 파라미터를 다음과 같은 방법으로 대체할 수 있습니다. componentDidMount() { const { location, replace } = this.props; const queryParams = new URLSearchParams(location.search); if (queryParams.has('error')) { this.setError( 'There was a problem.' ); queryParams.delete('error'); replace({ search: queryParams.toString(), }); } } 기능하는 컴포넌트에 리액트 훅을 사용하여 할 수 있는 방법이 있습니까?..

[ Dialog ( Modal ) ](모달)을 클릭하여 "Outside" 클릭을 처리하는 방법 상자 밖을 클릭하면 상자가 닫히므로 입력이 모두 손실됩니다.취소 버튼을 클릭할 때만 상자를 닫았으면 합니다.밖을 클릭할 때 무엇이 닫히는지 잘 모르겠어요.도움이 필요하신가요? @material-ui/core를 사용하고 있습니다. _close() { DeviceCreationActions.close(); } render() { const actions = [ {this.context.intl.formatMessage({id: 'Cancel'})} ]; if (0 < this.state.stepIndex) { actions.push( {this.context.intl.formatMessage({id: 'Back'}..

AppBar vs ToolBar가 뭐죠? 모든 material-ui 예제는 Appbar 내부에 툴바를 표시합니다.앱바 뿐만이 아니라그 둘의 차이는 무엇입니까? https://material.io/design/components/에는 툴바 컴포넌트가 없습니다.단, "App bars: top"만 있습니다. https://material.io/develop/web/components/toolbar/에서는 "기존 MDCToolbar 컴포넌트와 스타일은 향후 릴리즈에서 삭제될 예정입니다." 그럼 머티리얼 UI 툴바는 결국 없어질까요?각 컴포넌트에서 생성되는 기본 CSS 속성을 확인했습니다.툴바의 주된 목적은 앱바가 할 수 없는 인라인 디스플레이(요소가 서로 옆에 배치됨)로 자녀를 표시하는 것입니다.AppBar 컴..