반응형

reactjs 31

응답 단편 단축을 컴파일하지 못했습니다.

응답 단편 단축을 컴파일하지 못했습니다. 문제의 프로젝트는 Fragments와 Fragment sermand를 사용하는 기능을 가진 React-16.2.0을 사용하고 있습니다. https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html 전체 길이 구문은 정상적으로 동작하지만... import React, { Fragment, Component } from 'react'; class TestingFragment extends Component { render() { return ( This is a fragment of text Another part of the fragment ) } }; export default TestingFra..

programing 2023.03.13

기능 구성요소의 기능은 어디로 이동해야 합니까?

기능 구성요소의 기능은 어디로 이동해야 합니까? 는 이 하려고 한다React 재사용 가능한 컴포넌트에 애니메이션을 추가했습니다.이 컴포넌트는 캔버스에 1개의 상위 컴포넌트를 필요로 하는 것 같습니다.또한 이 컴포넌트에는 다수의 하위 컴포넌트를 필요로 합니다.function Ball(). 로, 포포 it, the it the the the 를 만드는 .Balls상태 비저장 컴포넌트로 변환합니다. 것은 않기 에 어디에 .this.update() ★★★★★★★★★★★★★★★★★」this.draw에서 function Ball(). 스테이트리스 컴포넌트의 기능은 컴포넌트 내부로 들어가나요, 외부로 들어가나요?즉, 다음 중 어떤 것이 더 좋은가? 1: const Ball = (props) => { const upd..

programing 2023.03.08

반응 - 여러 참조 전달

반응 - 여러 참조 전달 인접 html 테이블(InfoTable) 내의 대응하는 헤더로 스크롤해야 하는 동적으로 생성된 링크를 포함하는 SideNav 컴포넌트가 있습니다.나는 이것을 이루기 위해 여러 가지 다른 방법을 시도해봤지만 소용이 없었다. export default class Parent extends Component { state = { categories: [], } scrollToHeader = (tableRefString) => { // Function to pass to SideNav to access refs in InfoTable this[tableRefString].scrollIntoView({ block: 'start' }); } render() { return ( ); } } ..

programing 2023.03.08

머티리얼 UI에서 컴포넌트를 중앙에 배치하여 응답성을 높이는 방법

머티리얼 UI에서 컴포넌트를 중앙에 배치하여 응답성을 높이는 방법 반응 물질-UI 그리드 시스템을 잘 모르겠어요로그인에 폼 컴포넌트를 사용하는 경우 모든 디바이스(모바일 및 데스크톱)에서 폼 컴포넌트를 화면 중앙에 배치하는 가장 쉬운 방법은 무엇입니까?로그인 페이지에서 사용할 예정이기 때문에Material-UI를 사용하여 로그인 페이지에서 사용한 코드입니다. MUI v5 MUI v4 이하 그러면 이 로그인 폼이 화면 중앙에 표시됩니다. 다만, IE는 Material-UI 그리드를 서포트하고 있지 않기 때문에, IE에 잘못된 컨텐츠가 표시됩니다. @max에서 알 수 있듯이 다른 옵션은 다음과 같습니다. MUIv4 이하 버전은 대신 justice="center"를 사용해야 합니다. 그러나 그리드 항목 없이 ..

programing 2023.03.03

효소는 onChange 이벤트를 시뮬레이트합니다.

효소는 onChange 이벤트를 시뮬레이트합니다. 모카랑 효소랑 반응 성분 테스트 중이야컴포넌트는 다음과 같습니다(물론 심플화를 위해 생략). class New extends React.Component { // shortened for simplicity handleChange(event) { // handle changing state of input const target = event.target; const value = target.value; const name = target.name this.setState({[name]: value}) } render() { return( Poll Name ) } } 테스트 결과는 다음과 같습니다. it("responds to name change", ..

programing 2023.03.03

리액트 앱에서 CSS 모듈을 사용하여 글로벌 스타일을 적용하는 방법은 무엇입니까?

리액트 앱에서 CSS 모듈을 사용하여 글로벌 스타일을 적용하는 방법은 무엇입니까? 저는 현재 CSS Modules with React를 스타일링에 사용하고 있습니다.각 컴포넌트는 다음과 같이 컴포넌트 고유의 css 파일로 Import하고 있습니다. import React from 'react'; import styles from './App.css'; const example = () => ( Hello World! ); export default example; 개별 컴포넌트를 스타일링할 때는 정상적으로 동작합니다만, 컴포넌트 고유의 글로벌 스타일링(html, body, 헤더 태그, div 등)은 어떻게 적용합니까? ES6 가져오기 구문을 사용 중이므로 스타일시트를 가져올 때 동일한 구문을 사용할 수 ..

programing 2023.03.03

create-react-app에서 SSL 증명서를 제공하려면 어떻게 해야 합니까?

create-react-app에서 SSL 증명서를 제공하려면 어떻게 해야 합니까? 제가 만들고 테스트한 리액트 앱을 페이스북 보일러 플레이트로 로컬에서 호스팅하려고 합니다. 클라이언트 앱은 node.js를 사용하여 만든 API와 상호 작용하며, 안전한 연결을 설정하는 데 문제가 없었습니다(테스트를 위해 SSL 증명서를 보내는 node.js 클라이언트와 함께). 다만, 자기 서명된 SSL 증명서가 아닌 react를 사용하여 SSL 증명서를 송신하는 경우는 곤란합니다.이것에 의해, 크롬을 사용해 https://example.net:3000 에 액세스 하려고 하면, 이 에러가 발생합니다. 연결이 비공개 연결이 아닙니다(NET:ERR_CERT_AUTHORITY_INVALID). 이 문서는 도움이 되지 않았습니다..

programing 2023.02.26

이미지를 가져오면 재스트 테스트가 중단됩니다.

이미지를 가져오면 재스트 테스트가 중단됩니다. 자산을 가져오는 리액트 컴포넌트(예: "../../../assets/img/logo.png"에서 로고를 가져오면 이러한 오류가 발생합니다. ({"오브젝트") : function (module, exports, require, _dirname, _filename, global, jest) { }PNG 구문 오류:ScriptTransformer의 토큰이 잘못되었거나 예기치 않은 토큰입니다._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17) 나의 농담 설정은 "jest": { "testRegex": ".*\\.spec\\.js$", "moduleFileExte..

programing 2023.02.26

Moment.js 와 ReactJS (ES6)

Moment.js 와 ReactJS (ES6) Moment.js는 처음이고 React JS(ES6)를 프로젝트에 사용하고 있습니다.날짜 형식을 지정하려면 어떻게 해야 합니까? 포맷하고 싶다post.date아래 루프에 있습니다. render() { return ( { this.props.data.map((post,key) => {post.title} {post.date} )} ); } 웹 팩을 사용하고 있기 때문에 다음 작업을 수행할 수 있습니다.import또는require잠시 후 사용합니다. import moment from 'moment' ... render() { return ( { this.props.data.map((post,key) => {post.title} {moment(post.date)...

programing 2023.02.26

onEnter가 React-Router에서 호출되지 않음

onEnter가 React-Router에서 호출되지 않음 좋아, 이젠 지긋지긋해 그onEnter방법이 작동하지 않습니다.왜 그런 줄 알아? // Authentication "before" filter function requireAuth(nextState, replace){ console.log("called"); // => Is not triggered at all if (!isLoggedIn()) { replace({ pathname: '/front' }) } } // Render the app render( , document.getElementById("lf-app") 편집: 이 메서드는 콜할 때 실행됩니다.onEnter={requireAuth()}하지만 분명히 그것은 목적이 아닙니다.또한 원하는..

programing 2023.02.21
반응형