linuxpc

React에서 화면 크기가 모바일로 변경되었는지 감지하는 방법 React에서 웹 앱을 개발 중인데 상태를 변경하려면 화면 크기가 모바일 중단점에 진입한 시점을 감지해야 합니다. 특히 사용자가 모바일모드로 이행했을 때 sidenav를 축소하고 컴포넌트 내의 상태에 저장되어 있는 부울로 제어해야 합니다.컴포넌트 마운트 후에 이벤트청취자를 추가했습니다. componentDidMount() { window.addEventListener("resize", this.resize.bind(this)); this.resize(); } resize() { this.setState({hideNav: window.innerWidth { window.addEventListener("resize", handleResize) }..

How to add custom html attributes in JSX There are different reasons behind it, but I wonder how to simply add custom attributes to an element in JSX?EDIT: Updated to reflect React 16 Custom attributes are supported natively in React 16. This means that adding a custom attribute to an element is now as simple as adding it to a render function, like so: render() { return ( ); } For more: https://..

useCallback 의존관계 배열에 setState를 포함시켜야 합니까? const [active, setActive] = useState(false); const onActiveChanged = useCallback( isActive => () => { // do something setActive(isActive); }, [setActive], // or just [] is okay? ); 사용시useState그리고.useCallback(또는useMemo)를 함께 포함하면,setState어떻게 해야 할까요?이에 대한 권장 사항은 React Docs - Hooks API Reference에도 나와 있습니다. setState 함수는 상태를 갱신하기 위해 사용됩니다.새로운 상태 값을 받아들여 컴포넌트의 ..

reactjs의 this.refs를 사용하여 입력 유형에서 값을 얻는 방법 이.refs를 사용하여 입력 유형의 값을 가져올 수 없습니다.입력 유형에서 값을 가져오는 방법 export class BusinessDetailsForm extends Component { submitForm(data) { console.log(this.refs.googleInput.value) } } reder() { return( ) } } 피해야 한다ref="googleInput"지금은 유산으로 여겨지기 때문입니다.대신 신고해 주세요. ref={(googleInput) => { this.googleInput = googleInput }} 핸들러 내부에서this.googleInput참조할 수 있습니다. 그리고 네 마음속은sub..

Jest를 사용한 후크를 사용한 리액트 기능 컴포넌트 테스트 클래스 베이스의 컴포넌트에서 기능 컴포넌트로 이행하고 있습니다만, 훅을 명시적으로 사용하는 기능 컴포넌트내의 메서드에 대해서, jaste/enzym을 사용해 테스트를 작성하는 동안, 막히고 있습니다.여기 내 코드의 제거 버전이 있습니다. function validateEmail(email: string): boolean { return email.includes('@'); } const Login: React.FC = (props) => { const [isLoginDisabled, setIsLoginDisabled] = React.useState(true); const [email, setEmail] = React.useState(''); c..

리액트 훅 - show Component Update를 구현하려면 어떻게 해야 합니까? 옵션의 두 번째 인수로 어레이를 전달함으로써 효과를 건너뛰도록 React에 지시할 수 있습니다. 예를 들어 다음과 같습니다. useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changes 하지만 비교를 제어하려면 어떻게 해야 할까요?저만의 비교 논리를 덧붙입니다. 게 요.React.memo함수를 두 번째 인수로 전달할 수 있습니다.위의 코멘트에서 Gabrile Petrioli는 wake Component Update를 구현하는 방법을 설명하는 React.memo 문서..

리액트 쓸까?Pure Component는 어디에나 있습니까? React는 순수 렌더링을 통해 성능을 최적화할 수 있다고 말합니다.React에는 Pure Component가 있습니다.리액트 쓸까?Pure Component는 어디에나 있습니까?또는 React를 사용할 때.PureComponent 및 는 React를 사용하는 가장 적절한 위치입니다.Pure Component?항상은 아냐.소품이나 상태가 같더라도 컴포넌트가 재렌더될 수 있을 때 사용해야 합니다.예를 들어 부모 컴포넌트를 재렌더해야 하지만 자녀 컴포넌트 소품 및 상태는 변경되지 않은 경우를 들 수 있습니다.하위 구성 요소는 실제로 다시 렌더링할 필요가 없기 때문에 Pure Component의 이점을 얻을 수 있습니다. 꼭 모든 곳에서 사용할 필요..

MUI 커스터마이즈 버튼 색상? 다음(v1) MUI에서 버튼 색상을 수정하는 데 어려움을 겪고 있습니다. 어떻게 하면 muitheme이 부트스트랩과 비슷하게 행동하도록 설정할 수 있을까요? 그러면 빨간색은 "btn-danger", 녹색은 "btn-success"를 사용할 수 있을까요? 는 커스텀으로 했다.className제대로 작동하지 않고(색상은 변하지 않습니다) 반복하는 것 같습니다.떤떤옵 션션?이거 드셔보세요 Submit MUI v5에서는 MUI에 맞게 테마를 커스터마이즈할 수 있습니다.Button·후드 아래에서도 원색과 세컨더리 색상이 동일하게 작성됩니다. const { palette } = createTheme(); const { augmentColor } = palette; const crea..

Formik, Yup 및 React를 사용한 비동기 검증 Formik으로 비동기 검증을 하고 yup으로 검증을 하고 싶은데 예제나 데모를 찾을 수 없습니다.const validationSchema = Yup.object().shape({ username: Yup.string() .test('checkDuplUsername', 'same name exists', function (value) { return new Promise((resolve, reject) => { kn.http({ url: `/v1/users/${value}`, method: 'head', }).then(() => { // exists resolve(false) }).catch(() => { // note exists resolve(..

React.js의 정상적인 디버깅 튜토리얼 마감되었습니다. 이 질문은 충족되지 않습니다.스택 오버플로우 가이드라인현재 답변을 받고 있지 않습니다. 서적, 도구, 소프트웨어 라이브러리 등에 대한 권장 질문을 허용하지 않습니다.당신은 그 질문을 사실과 인용문으로 대답할 수 있도록 편집할 수 있다. 7년 전에 문을 닫았어요 이 질문을 개선하다 React.js 앱 디버깅 방법에 대해 단계별 초보 튜토리얼을 제안해 주실 수 있습니까?React를 처음 접하는 사람인데, 지금 가장 짜증나는 것은 콘솔에 오류가 많이 표시되는데 어떻게 추적해야 할지 모르겠다는 것입니다."많은 오류가 표시됨"을 디버깅하는 일반적인 전략은 설명하기가 어렵기 때문에 컴포넌트 수준의 오류를 디버깅하는 프로세스에 대해 설명합니다. 선택한 브라우..