starcafe

비인터랙티브모드에서의 CRA Jest 실행 업데이트: 주로 CI에서 테스트를 실행하는 것이 사용 사례이지만, 기본 CRA Jest 매개 변수를 재정의하는 것은 일반적으로 의문입니다. Create React App과 함께 제공된 Jest 구성을 사용하여 테스트를 수행하고 있습니다.항상 인터랙티브모드로 기동합니다. › Press a to run all tests. › Press o to only run tests related to changed files. › Press p to filter by a filename regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run. 하지만 내 의견을 기다리고 싶진 않아.한 번 ..

리액트 앱에서 API 키 사용 저는 2개의 서드파티 서비스를 사용하는 리액트 앱을 가지고 있습니다.앱이 다음을 사용하여 시작되었습니다.react-create-app. 이 두 서비스 모두 API 키가 필요합니다. 키는 다음과 같이 스크립트태그를 통해 제공됩니다. 다른 API 키는 요청에 사용됩니다.실제 키를 일정하게 저장하고 요청을 작성하기 위해 사용합니다.다음과 같이 합니다. const MY_OTHER_KEY = 'MY_OTHER_KEY' let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}` API 키 취급에 관한 Google의 베스트 프랙티스 팁은 다음과 같습니다. API 키를 코드에 직접 삽입하지 않음 첫 번째 질문입니다. 1. 에서의 변수 사용..

Vite 프로젝트 React TS에서 절대 경로가 작동하지 않습니다. 저는 Vite 리액트 프로젝트에서 일할 수 있는 절대적인 길을 찾기 위해 노력하고 있습니다. 프로젝트 작성 방법은 다음과 같습니다. npm init @vitejs/app npx: installed 6 in 1.883s √ Project name: ... test-vite √ Select a framework: » react √ Select a variant: » react-ts 다음으로 TS 공식 문서에 따라 tsconfig.json에 baseUrl을 추가했습니다. { "compilerOptions": { "baseUrl": "./src", ... 다음으로 단순한 컴포넌트(T:\test-vite\src\components)를 추가합니다..

React Native에서 상위 화면 너비의 80%를 표시합니다. 이 폼을 .TextInput80%로 하다 HTML 및 일반 CSS에서는 다음과 같이 간단합니다. input { display: block; width: 80%; margin: auto; } React Native를 .display속 、 분 、 폭 、 여 、 는백 。 그럼 제가 대신 뭘 해야 할까요?리액트 네이티브의 문제 트래커에는 이 문제에 대한 논의가 몇 가지 있지만, 제안된 솔루션은 불쾌한 해킹처럼 보입니다. 0 React Native 0.42 height: ★★★★★★★★★★★★★★★★★」width:퍼센티지를 받아들이다. width: 80%네 스타일시트에 올려놓으면 효과가 있어. 예시 로서의 자녀 폭 코드 import React fr..

반응 소품 - 다른 소품이 null이거나 비어 있는 경우 소품에서 세트가 필요합니다. 컴포넌트가 있습니다.. 컴포넌트에 없는 경우this.props.children, 소품을 설정하고 싶다.ariaLabel~하듯이isRequired그 이외의 경우는 옵션입니다.그걸 어떻게 하는 거죠? ariaLabel소품 불필요: Add to bag ariaLabel소품 필요: 한다면this.props.children그리고.this.props.ariaLabel비어있으면, 라고 하는 에러가 발생합니다.this.props.ariaLabel이isRequired prop 타입: Button.propTypes = { /** icon inside Button. */ icon: React.PropTypes.object, /** Cont..

리액트 훅 useState Array 리셋을 시도했습니다.useState어레이 값을 입력했지만 어레이 값에 대한 참조를 찾을 수 없습니다. 드롭다운 값을 초기 상태에서 allowedState 값으로 변경하려고 합니다.여기서 후크 방식을 사용하여 값을 설정하고 있습니다.setStateValues이 코드에 코멘트를 붙이면 드롭 다운이 표시됩니다.나는 왜 사용할 수 없는지 이해할 수 없었다.setStateValuesmethod를 사용하여 상태 변수 값을 리셋합니다. 다음의 에러가 표시됩니다. 리렌더가 너무 많아무한 루프를 방지하기 위해 리액트는 렌더링 수를 제한합니다. 여기 뭐가 잘못됐나요? import React, { useState } from "react"; import ReactDOM from "rea..

Font Awesome 5는 리액트에 소셜/브랜드 아이콘을 사용합니다. Font Awesome 문서에는 일반/솔리드 글꼴을 React에 추가하는 방법만 나와 있습니다.소셜 아이콘은 어떤가요? 먼저 짐을 집어들었다. npm i --save @fortawesome/fontawesome-svg-core \ npm i --save @fortawesome/free-brands-svg-icons \ npm i --save @fortawesome/react-fontawesome 주의: 교체했습니다.npm i --save @fortawesome/free-solid-svg-icons \와 함께npm i --save @fortawesome/free-brands-svg-icons \ 그런 다음 반응: import { lib..

리액트 - 컴포넌트 동적 Import 사용자 입력에 따라 다른 컴포넌트를 렌더링하는 페이지가 있습니다.현재 아래와 같이 각 컴포넌트의 Import를 하드코딩하고 있습니다. import React, { Component } from 'react' import Component1 from './Component1' import Component2 from './Component2' import Component3 from './Component3' class Main extends Component { render() { var components = { 'Component1': Component1, 'Component2': Component2, 'Component3': Component3 }; var ty..

useEffect에 비동기 함수를 추가한 후 오류가 발생함 useEffect 함수는 getResults 함수 변수만 언급해도 앱이 크래쉬하지 않습니다.그러나 아래 코드에서와 같이 호출하면 다음과 같은 오류가 발생합니다. react-dom.development.js:21857 Uncaught TypeError: 파괴는 함수가 아닙니다. 그리고. 오류 처리 동작을 사용자 정의하려면 오류 경계를 트리에 추가하는 것이 좋습니다. function App() { const [foods, setFoods] = useState([]); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => getResponse()); const getResponse = as..

React js의 함수에 인수를 전달하는 방법 알림 창에 사용자의 이메일을 표시하고 싶습니다.그러나 e-메일을 표시하는 인수로 전달하는 방법을 모릅니다.경보 방식또, 어느쪽도 사용할 수 없게 되어 있습니다.그래서 디스플레이를 할당해야 합니다.변수에 대해 경고하고 onClick에서 사용합니다.나는 왜 내가 직접 전화를 걸지 못하게 하는지 모르겠다. class People extends React.Component{ render (){ var handleClick = this.displayAlert; var items = this.props.items.map(function(item) { return( {item.lastName + ', ' + item.firstName} ) }); return ({item..