반응형

reactjs 35

경고:목록의 각 아이는 고유한 "키" 소품을 가지고 있어야 합니다.

경고:목록의 각 아이는 고유한 "키" 소품을 가지고 있어야 합니다. Google Books API를 사용하여 앱을 만들고 있으며 목록에 있는 각 아이들에게 고유한 키를 전달하고 있는 것처럼 보이지만 오류가 사라지지 않습니다.내가 뭔가 잘못하고 있는 게 틀림없는데 뭐가 잘못됐는지 모르겠어. const BookList = (props) => { //map over all of the book items to create a new card for each one in the list const books = props.books.data.items.map((book) => { console.log(book.id); return ( ); }); return {books}; }; 반환 후에 주의해 주세요.con..

source 2023.03.20

React.useMemo를 사용한 비동기 호출

React.useMemo를 사용한 비동기 호출 시나리오는 비교적 단순합니다.리모트 서버에서 장시간 실행되는 온디맨드 계산이 이루어집니다.우리는 결과를 메모하고 싶다.원격 리소스에서 동시에 가져오기는 하지만 이 계산 결과가 사용자에게 표시되기를 원할 뿐 모든 렌더에서 이 작업을 수행할 수는 없기 때문에 부작용이 아닙니다. 문제: React.useMemo는 Typescript의 비동기/대기 기능을 직접 지원하지 않으며 다음 약속을 반환합니다. //returns a promise: let myMemoizedResult = React.useMemo(() => myLongAsyncFunction(args), [args]) //also returns a promise: let myMemoizedResult = Re..

source 2023.03.20

리액트 리덕스 접속 컴포넌트를 유닛 테스트하는 방법

리액트 리덕스 접속 컴포넌트를 유닛 테스트하는 방법 유닛 테스트에는 Mocha, Chai, Karma, Sinon, Webpack을 사용하고 있습니다. 이 링크를 따라 리액트 리듀스 코드의 테스트 환경을 설정했습니다. Karma, Babel 및 Webpack을 사용한 React에서 테스트와 코드 적용 범위를 구현하는 방법 액션과 리듀서 javascript 코드는 정상적으로 테스트할 수 있지만 컴포넌트 테스트에서는 항상 오류가 발생합니다. import React from 'react'; import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead. i..

source 2023.03.20

맵과 결합을 사용하여 반응 구성요소를 렌더링하려면 어떻게 해야 합니까?

맵과 결합을 사용하여 반응 구성요소를 렌더링하려면 어떻게 해야 합니까? Array of String을 표시하는 컴포넌트가 1개 있습니다.코드는 다음과 같습니다. React.createClass({ render() { this.props.data.map(t => t) } }) 완벽하게 잘 작동하고 있습니다.props.data = ['tom', 'jason', 'chris'], 페이지에 표시되는 결과는 다음과 같습니다.tomjasonchris. 그 후 콤마를 사용하여 모든 이름을 등록하고 싶기 때문에 코드를 다음과 같이 변경합니다. this.props.data.map(t => t).join(', ') 는 ""입니다.[Object], [Object], [Object]. 렌더링할 반응 구성요소가 되기 위해 객체..

source 2023.03.15

'data:font/woff.....' 글꼴 로드를 거부했습니다. 이는 "default-src 'self' 컨텐츠 보안 정책 지시문을 위반합니다.'font-src'는

'data:font/woff.....' 글꼴 로드를 거부했습니다. 이는 "default-src 'self' 컨텐츠 보안 정책 지시문을 위반합니다.'font-src'는 브라우저 콘솔에서 내 react webApp이 이 오류를 표시함 Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 기타: Refused to connect to 'w..

source 2023.03.15

Visual Studio 2015 JSX/ES2015 구문 강조

Visual Studio 2015 JSX/ES2015 구문 강조 ES2015 코드가 있는 JSX용 Visual Studio 2015에서 올바른 구문 강조 표시를 얻는 방법은 무엇입니까? 를 떼어내면 정상적으로 동작합니다.import ★★★★★★★★★★★★★★★★★」export키워드: 방금 Visual Studio 2015 Enterprise Update 1로 업데이트했지만 여전히 그대로입니다.갱신(2017-02) NTVS(Node Tools for Visual Studio)는 v1.2부터 Salsa 분석 엔진을 사용하고 있으며 NTVS를 사용하는 것이 JSX 지원을 위한 최소 저항 경로일 수 있습니다. https://github.com/Microsoft/nodejstools 상세한 것에 대하여는, htt..

source 2023.03.10

대응: 화살표 키로 목록을 탐색하는 방법

대응: 화살표 키로 목록을 탐색하는 방법 하나의 텍스트 입력과 그 이하의 목록(시맨틱 UI 사용)으로 간단한 컴포넌트를 작성했습니다. 이제 화살표 키를 사용하여 목록을 탐색합니다. 우선 첫 번째 요소를 선택해야 합니다.그러나 특정 목록 요소에 액세스하려면 어떻게 해야 합니까? 둘째, 현재 선택된 요소의 정보를 얻고 다음 요소를 선택합니다.어떤 요소가 선택되었는지 정보를 얻으려면 어떻게 해야 합니까? 선택이란 클래스를 추가하는 것을 의미합니다.active아니면 더 좋은 아이디어가 있을까요? export default class Example extends Component { constructor(props) { super(props) this.handleChange = this.handleChange.b..

source 2023.03.10

Jest 및 React에서의 SyntaxError 및 CSS 파일 Import

Jest 및 React에서의 SyntaxError 및 CSS 파일 Import 나는 리액트 앤 바벨과 함께 나의 첫 번째 재스트 테스트를 통과하기 위해 노력하고 있다. 다음의 에러가 표시됩니다. 구문 오류: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton.less: 예기치 않은 토큰 > 7 | @import '../variables.css'; | ^ 제 소포요.jese의 json 설정은 다음과 같습니다. "babel": { "presets": [ "es2015", "react" ], "plugins": [ "syntax-class-properties", "transform-class-propert..

source 2023.03.10

react-router를 사용하여 브라우저에서 /#/을(를) 중지하는 방법

react-router를 사용하여 브라우저에서 /#/을(를) 중지하는 방법 「 」를 막기 의 방법/#/브라우저의 주소 표시줄에 표시되지 않도록 하려면 어떻게 해야 합니까? 이동하기 링크를 하면 "J"가 표시됩니다.localhost:3000/#/ ★★★★★★★★★★★★★★★★★」localhost:3000/#/about루트에 따라 다릅니다.리액트 라우터가 몇 번이고 리팩터링을 거듭함에 따라 이 질문에 대한 답변은 몇 년 동안 극적으로 바뀌었습니다.각 버전의 문제를 해결하는 방법에 대한 자세한 내용은 다음과 같습니다. 버전 6 를 " 라우터입니다.는 " 라우터"를 하여 작성됩니다.이 라우터는createBrowserRouter()앱의 됩니다.반응하다 import React from "react"; import ..

source 2023.03.10

React에서 컴포넌트 이름 가져오기

React에서 컴포넌트 이름 가져오기 React 어플리케이션을 개발 중입니다.Loading 컴포넌트는 대기용 애니메이션입니다.호출한 컴포넌트에 따라 이 Loading 컴포넌트에 메시지를 추가합니다. 다음으로 Loading 컴포넌트(this.state.display Loading at true 또는 false)를 호출합니다. class LoginForm extends React.Component { render() { return ( {this.state.displayLoading && } ); } } 변수 loadingFrom(className)에서 "LoginForm"을 가져오고 싶습니다.어쩌면 그건 올바른 방법이 아닐지도 몰라.클래스 컴포넌트 사용할 수 있습니다.this.constructor.name..

source 2023.03.05
반응형