instargram

React.js:클릭 시 컴포넌트를 추가하는 방법 나는 React에 처음이라 기본적인 것에 곤혹스럽다. 클릭 이벤트로 DOM 렌더링 후 컴포넌트를 DOM에 추가해야 합니다. 저의 첫 번째 시도는 다음과 같습니다만, 잘 되지 않습니다.하지만 내가 시도해 본 것 중 가장 좋은 것이다. (jQuery와 React를 섞은 것에 대해 미리 사과한다.) ParentComponent = class ParentComponent extends React.Component { constructor () { this.addChild = this.addChild.bind(this); } addChild (event) { event.preventDefault(); $("#children-pane").append(); } ren..

반응 - 부모에 대한 이벤트 트리거를 자식에서 방지 이 시나리오에서는 부모 요소를 클릭하면 다른 색상의 자식 요소가 플립됩니다.안타깝게도 사용자가 색상 중 하나를 클릭하면 부모에 대한 '클릭' 이벤트도 트리거됩니다. 자녀가 클릭될 때 부모에 대한 이벤트 트리거를 중지하려면 어떻게 해야 합니까? 생각할 수 있는 해결책: CSS? 추가pointer-events : none클래스를 부모에게 전달합니다.단, 이는 부모로부터 보호대상자를 삭제해야 한다는 것을 의미합니다.pointer-events나중에 수업해요. 참조를 사용하시겠습니까? 녹음하다ref부모의React요소를 클릭하고 아이를 클릭하면event.target심판을 상대로?나는 이것이 싫다 왜냐하면 나는 글로벌이 싫기 때문이다.ref. 생각이나 더 나은 해결..

MUI에서 TextField 글꼴 색상을 변경하시겠습니까? 저는 현재 MUI를 사용하고 있습니다. 여러 줄의 글꼴 색상을 변경하는 데 문제가 있습니다.TextField. 그리고 CSS: .textfield { background-color: #000; color: green; } 하지만 왠지 검정 배경만 나오고 글꼴은 검정색입니다.폰트 색상을 적절하게 변경하는 방법 아는 사람?TextFieldMUI를 사용하는가?MUI v5 에서는, 이것을 다음의 방법으로 실행할 수 있습니다.sx소품: 좀 더 재사용이 필요한 경우 좀 더 긴 접근법: const options = { shouldForwardProp: (prop) => prop !== 'fontColor', }; const StyledTextField = s..

Next.js 페이지 전환 시 화면 로드 중 Next.js 앱에서 경로를 변경할 때 로드 화면을 구현하려고 합니다(예: /home -> /about). 현재 실시 상황은 다음과 같습니다.초기 로드 상태를 false로 설정하고 componentDidMount에서 변경합니다.또한 루트 변경이 시작되면 componentDidMount 내의 Router.events.on 함수를 호출하여 로드 상태를 변경합니다. 페이지 폴더의 _app.parames class MyApp extends App { constructor(props) { super(props); this.state = { loaded: false, }; } componentDidMount() { this.setState({ loaded: true })..

리액트 + 플럭스 및 서버 측 렌더링(이형 반응 + 플럭스) 앱의 초기 상태를 동형 어플리케이션으로 설정하는 일반적인 방법은 무엇입니까?Flux가 없다면 다음과 같이 간단하게 사용할 수 있습니다. var props = { }; // initial state var html = React.renderToString(MyComponent(props); 그런 다음 익스프레스 핸들 바를 통해 마크업을 렌더링하고 다음 방법으로 표시합니다.{{{reactMarkup}}. 클라이언트 측에서 초기 상태를 설정하려면 다음과 같이 수행합니다. if (typeof window !== 'undefined') { var props = JSON.parse(document.getElementById('props').innerHTM..

리액트 기능 컴포넌트의 lodash debouncomponent React Table 컴포넌트 주위에 구축되어 있는 기능 컴포넌트는 서버 측 페이지 설정 및 검색에 Apollo GraphQL 클라이언트를 사용합니다.검색 디버깅을 구현하여 사용자가 해당 값을 입력하지 않게 되면 서버에 대해 하나의 쿼리만 실행되도록 하려고 합니다.lodash debounce와 멋진 debounce 솔루션을 시도했지만 검색 필드에 입력된 모든 문자에 대해 서버에 대한 쿼리가 실행됩니다. 내 컴포넌트는 다음과 같습니다(관련없는 정보가 수정되었습니다). import React, {useEffect, useState} from 'react'; import ReactTable from "react-table"; import _ fr..

React를 위한 부트스트랩과 머티리얼 UI의 비교 프로젝트에서는 두 가지를 모두 사용하고 있으며 부트스트랩 컴포넌트 내에서 머티리얼 UI 컴포넌트를 사용해야 하는 경우가 있어 UI가 예상대로 표시됩니다.그러나 나는 이 접근방식을 사용하지 말 것을 충고받았다.둘 다 그리드를 사용하고 있어 굴곡할 수 있는 이유가 있습니까?저는 장황한 편이기 때문에 간결하게 대답하겠습니다. 결론: 두 가지를 모두 사용하는 것이 나쁘다고 말한 사람은 자신의 의견을 표현하는 것일 수 있습니다. 실제로는 두 가지를 모두 사용하는 것이 디자인하는 데 있어서 문맥이 매우 부족하다고 말합니다.@user3770494는 매우 좋은 지적입니다.그러나 빌드 크기에 대해서는 타당하고 알기 쉬우나 어플리케이션의 범위에 따라 다릅니다.파이버 네트..

다른 구성 요소 경고를 렌더링하는 동안 구성 요소를 업데이트할 수 없습니다. 이 경고는 다음과 같습니다. index.js:1 Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Register`). To locate the bad setState() call inside `Register` 스택 트레이스에 표시된 위치로 이동하여 모든 설정 상태를 제거했지만 경고는 여전히 지속됩니다.redux 디스패치에 의해 이 문제가 발생할 가능성이 있습니까? 내 코드: 등록. 삭제. class Register extends Component { render() { if( this.props.regist..

ESLint - 구성 요소를 순수한 기능으로 작성해야 합니다(반응 선호/상태 없음 기능). ESLint에서 리액트 프로젝트에서 이 오류가 발생하였습니다. 구성 요소는 순수한 함수로 작성해야 합니다(반응 선호/상태 없음 함수). 컴포넌트의 첫 번째 행을 가리킵니다. export class myComponent extends React.Component { render() { return ( //stuff here ); } } 이 오류를 제거하려면 어떻게 해야 합니까?두 가지 선택지 경고를 일시적으로 비활성화하다 (테스트되지 않았습니다.또한 여러 가지 방법이 있습니다). // eslint-disable-next-line react/prefer-stateless-function export class myCo..

핫 새로고침 시 프로세스가 정의되지 않음 리액트 앱으로 만든 리액트 앱이 있는데 핫 새로고침으로 페이지가 완전히 사라집니다. Uncaught ReferenceError: process is not defined 이상한 것은, 지금까지 전혀 눈치채지 못했던 iframe이 주입된 것 같습니다. 이 iframe은 새로고침과 동시에 DOM에 추가되어 페이지가 파손되고 갱신이 금지됩니다.iframe-bundle.js에 대한 문서를 온라인으로 찾을 수 없습니다. 편집: 노드 모듈과 의심스러운 Import를 삭제하려고 했습니다(일시 설치했습니다).craco이전)을 참조해 주세요.여전히 같은 문제입니다.정말 짜증나! 편집 2: 그 iframe을 삭제하면 모든 것이 정상으로 돌아오는 것 같습니다.즉, 페이지가 갱신되어 ..