반응형

ReactJS 42

JavaScript Axios/Fetch 사용.브라우저 캐시를 비활성화할 수 있습니까?

JavaScript Axios/Fetch 사용.브라우저 캐시를 비활성화할 수 있습니까? React.js에 업데이트 중인 freeCodeCamp 프로젝트의 견적 API를 문의하려고 합니다.지금 사용하려고 합니다.Fetch또는AxiosAPI를 쿼리하지만 브라우저에서 응답을 캐싱합니다.나는 알고 있다$ajax이 있다{ cache: false }브라우저가 새 요청을 수행하도록 강제합니다. 제가 같은 일을 할 수 있는 방법이 있을까요?Fetch또는Axios? 그cache-control설정이 이미 로 설정되어 있는 것 같습니다.max-age: 0타고Axios. 이것은 API를 조회하는 나의 코드입니다. generateQuote = () => { axios.get('https://quotesondesign.com/w..

programing 2023.04.05

반응에서 텍스트를 출력하는 방법스팬으로 감싸지 않는 JS

반응에서 텍스트를 출력하는 방법스팬으로 감싸지 않는 JS ReactJS 기반 응용 프로그램에서는 다음을 수행합니다. var _ = React.DOM; _.span(null, 'some text', _.select(null, ...)); 문제는 'some text'가 DOM의 추가 스판 요소로 랩되어 있다는 것입니다.이 동작을 피하고 원시 텍스트만 출력할 수 있는 방법이 있습니까? 명확히 하자면:출력하고 싶다 some text... 것은 아니다. some text... 업데이트: 이것은 React v15(2016-04-06)에서 "고정"되었습니다.이제 댓글 노드는 각 텍스트에 추가되지만 더 이상 코멘트 노드로 둘러싸여 있지 않습니다.태그를 붙입니다. 이번 릴리즈에서는 커뮤니티로부터 놀라운 공헌을 받고 있으..

programing 2023.04.05

입력 요소가 리액트 내에 집중되어 있는지 여부를 확인합니다.JS

입력 요소가 리액트 내에 집중되어 있는지 여부를 확인합니다.JS 다음과 같은 입력 요소가 현재 반응 내에 포커스를 맞추고 있는지 여부를 감지하려면 어떻게 해야 합니까?JS 렌더 함수? 에 대해 확인할 수 있습니다.document.activeElement입력 노드가 마운트되어 있고 그에 대한 참조가 있는 경우: const searchInput = React.useRef(null) if (document.activeElement === searchInput.current) { // do something } return 또 다른 방법은 이벤트 청취자를 추가하는 것입니다.focus그리고.blur입력 필드 내의 이벤트: const [focused, setFocused] = React.useState(false)..

programing 2023.04.05

React(반응)에서 오버플로우 div(div)의 맨 아래로 스크롤합니다.

React(반응)에서 오버플로우 div(div)의 맨 아래로 스크롤합니다. 나는 가지고 있다ul와 함께max-height그리고.overflow-y: auto. 사용자가 충분히 입력했을 때li요소,ul스크롤이 시작되지만 마지막은li와 함께form사용자에게 항상 표시되도록 합니다. 실장해 보았습니다.scrollToBottom다음과 같은 기능을 수행합니다. scrollToBottom() { this.formLi.scrollIntoView({ behavior: 'smooth' }); } 하지만 그것은 단지ul화면 맨 위로 점프하여 를 표시하다li그 안에 형체가 보이는 유일한 것으로서 말이야 더 좋은 방법이 있을까요?제가 찾은 답변은 조금 더 나이가 들어 React DOM을 사용하는 경향이 있습니다.감사합니다! ..

programing 2023.04.05

Stencil과 Respect 및 Angular는 어떻게 다릅니까?

Stencil과 Respect 및 Angular는 어떻게 다릅니까? Angular에 익숙하고 React의 기본을 알고 있습니다.스텐실 문서를 조사하던 중 스텐실 구성요소가 둘 다 있다는 걸 알아냈어요@Component데코레이터와render()방법 - 컴포넌트.tsx import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-first-component', styleUrl: 'my-first-component.scss' }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() firstName: string; ..

programing 2023.04.05

React에서 Formik과 함께 사용자 지정 입력을 사용하는 방법

React에서 Formik과 함께 사용자 지정 입력을 사용하는 방법 Formik 내에서 DatePicker를 사용하려고 합니다.하지만 DatePicker의 날짜를 클릭해도 폼 값은 변경되지 않습니다.대신 다음 오류가 발생하였습니다. Uncaught TypeError: e.persist는 Formik의 함수가 아닙니다._this.handle Change (formik.es6.js:5960) 코드 단축, 코드는 아래와 같습니다. const SomeComponent = () => ( { return ( ) }} /> ) https://github.com/jaredpalmer/formik/issues/187과 https://github.com/jaredpalmer/formik/issues/86에서 몇 가지 문서..

programing 2023.04.05

매개 변수가 있는 함수를 reactj의 소품을 통해 전달

매개 변수가 있는 함수를 reactj의 소품을 통해 전달 컴포넌트 계층에서 부모에서 자녀의 자녀까지 이어지는 기능이 있습니다.평소에는 크게 문제가 되지 않겠지만, 아이로부터 파라미터를 받아야 합니다.현재 다음 오류 메시지가 나타납니다. Uncaught (in promise) TypeError: this.props.myFunction is not a function. 다음은 작업 코드 예시입니다. class SomeComponent extends Component{ constructor(props){ super(props); //does whatever stuff this.myFunction = this.myFunction.bind(this); } //(only applicable to raw and no..

programing 2023.04.05

재료 UI 아이콘을 가져오려면 어떻게 해야 합니까?재료 UI 아이콘을 사용하는 중에 문제가 발생했습니다.

재료 UI 아이콘을 가져오려면 어떻게 해야 합니까?재료 UI 아이콘을 사용하는 중에 문제가 발생했습니다. 저는 프로젝트에서 React와 함께 Material UI를 사용하고 있었는데, Material 아이콘을 Import할 때 문제가 있었습니다.코드는 다음과 같이 머티리얼 UI(버전:"material-ui": "^1.0.0-beta.41", "material-ui-icons": "^1.0-beta.36",) 문서에서 복사됩니다. import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import SkipNextIcon from '@materia..

programing 2023.03.31

React.js 컴포넌트 내부의 컴포넌트를 렌더링하는 방법

React.js 컴포넌트 내부의 컴포넌트를 렌더링하는 방법 난 갇혔어.다른 파일에 여러 개의 컴포넌트가 있습니다.main.jsx로 렌더링하면 다음과 같습니다. ReactDOM.render(, document.getElementById("page-landing")); ReactDOM.render(, document.getElementById("wrapper profile-data-wrapper")); ReactDOM.render(, document.getElementById("history wrapper")); 다 잘 되고 있는데, 그게 좋은 방법일까요?ReactDom.render가 1개밖에 없는 것처럼 다음과 같은 작업을 수행할 수 있습니다. ReactDOM.render(, document.getElem..

programing 2023.03.31

리액트 테스트 라이브러리:userEvent.click을 사용할 때와 fireEvent를 사용할 때

리액트 테스트 라이브러리:userEvent.click을 사용할 때와 fireEvent를 사용할 때 저는 지금 리액트 테스트 도서관 공부를 하고 있습니다. 요소와의 마우스 상호 작용을 테스트하고 싶습니다.현재 userEvent.click(element)와 fireEvent.click(element)의 차이를 잘 모르겠습니다.둘 다 사용을 권장합니까?다음 예에서는 올바르게 구현되고 있습니까? const mockFunction = jest.fn(() => console.info('button clicked')); const { getByTestId } = render(); const myAwesomeButton = getByTestId('my-awesome-button'); // Solution A fireE..

programing 2023.03.31
반응형