반응형

reactjs 30

Axios는 url에 들어가지만 두 번째 파라미터를 오브젝트로 하면 동작하지 않습니다.

Axios는 url에 들어가지만 두 번째 파라미터를 오브젝트로 하면 동작하지 않습니다. GET 요청을 두 번째 매개 변수로 보내려고 하는데 url로 보내는 동안 작동하지 않습니다. 이 방법은 $_GET['naam'] returns test입니다. export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAV..

it-source 2023.03.02

리액트를 사용하여 HTML5 비디오의 소스 URL 업데이트

리액트를 사용하여 HTML5 비디오의 소스 URL 업데이트 HTML5 비디오 요소의 소스 태그를 업데이트하여 버튼을 클릭하면 재생 중인 모든 것이 새 비디오로 전환되도록 합니다. 소품을 통해 제공되는 소스 URL과 함께 HTML5 비디오 요소를 반환하는 Clip 컴포넌트가 있습니다. function Clip(props) { return ( ) } Movie 컴포넌트도 있습니다.Movie 컴포넌트에는 여러 개의 URL이 포함되어 있으며, 각 URL은 무비의 한 섹션에 대응합니다.또한 현재 재생 중인 섹션을 기억하여 반복기처럼 작동하는 위치 속성도 포함됩니다. class Movie extends Component { constructor() { super(); this.state = { sections: [..

it-source 2023.03.02

React-Router : IndexRoute의 목적은 무엇입니까?

React-Router : IndexRoute의 목적은 무엇입니까? IndexRoute와 IndexLink를 사용하는 목적이 무엇인지 모르겠습니다.어떤 경우에도 About 경로가 활성화되지 않았다면 아래 코드는 Home 컴포넌트를 먼저 선택했을 것으로 보입니다. 대 첫 번째 케이스의 장점/목적은 무엇입니까?위의 예에서는,/할 수 있다App와 함께Home어렸을 때 지나갔죠.아래 예에서는 로 이동합니다./할 수 있다App둘 다 없이 Home도 아니다About둘 다 일치하지 않기 때문에 렌더링되고 있습니다. 이전 버전의 React Router의 경우 관련 버전의 Index Routes and Index Links 페이지에서 자세한 내용을 확인할 수 있습니다.버전 4.0 이후로는 리액트라우터는IndexRoute..

it-source 2023.03.02

React useState with functional update 폼이 필요한 이유는 무엇입니까?

React useState with functional update 폼이 필요한 이유는 무엇입니까? 기능 업데이트에 대한 React Hook 문서를 읽고 있는데 다음 인용문을 참조하십시오. 업데이트된 값이 이전 값을 기반으로 하므로 "+" 및 "-" 버튼은 기능 양식을 사용합니다. 그러나 기능 갱신이 어떤 목적으로 필요한지, 새로운 상태의 컴퓨팅에서 오래된 상태를 직접 사용하는 것과 어떤 차이가 있는지 알 수 없습니다. React useState Hook의 업데이트 기능에 기능 업데이트 양식이 필요한 이유는 무엇입니까? 차이를 명확하게 알 수 있는 예(직접 업데이트를 사용하면 버그가 발생합니다)는 무엇입니까? 예를 들어 이 예를 문서에서 변경한 경우 function Counter({initialCount..

it-source 2023.02.25

리액트 라우터를 사용한 여러 파라미터

리액트 라우터를 사용한 여러 파라미터 React 15.0.2 및 React Router 2.4.0을 사용합니다.루트에 여러 개의 파라미터를 전달하고 싶은데 최적의 방법을 모르겠습니다. 필요한 것은 다음과 같습니다. @alexander-t에서 설명한 바와 같이: path="/user/manage/:id/:type" 옵션인 채로 두는 경우는, 다음의 순서에 따릅니다. path="/user/manage(/:id)(/:type)" 리액트 라우터 v4 React Router v4는 v1-v3과 다르며 옵션 경로 파라미터는 매뉴얼에 명시적으로 정의되어 있지 않습니다. 대신 path-to-regexp가 인식하는 경로 파라미터를 정의하도록 지시됩니다.이를 통해 반복 패턴, 와일드 카드 등 경로를 정의할 때 훨씬 더 유..

it-source 2023.02.25

리액트 테스트 라이브러리를 사용하여 요소 내부에 텍스트 확인

리액트 테스트 라이브러리를 사용하여 요소 내부에 텍스트 확인 Testing Library를 사용하여 리액트 앱에 대한 테스트를 작성하고 있습니다.텍스트가 표시되는지 확인하고 싶지만 이미 다른 곳에 표시되어 있기 때문에 특정 장소에 표시되어 있는지 확인해야 합니다. 쿼리 테스트 라이브러리 문서에는getByText쿼리는container이 매개 변수를 사용하면 컨테이너 내에서 검색할 수 있을 것 같습니다.이렇게 하려고 했는데container그리고.text파라미터는 documents에서 지정된 순서로 지정합니다. const container = getByTestId('my-test-id'); expect(getByText(container, 'some text')).toBeTruthy(); 에러가 표시됩니다.m..

it-source 2023.02.22

대응: 컴포넌트의 컨스트럭터를 한 번만 호출하는 이유는 무엇입니까?

대응: 컴포넌트의 컨스트럭터를 한 번만 호출하는 이유는 무엇입니까? 다음 예시는 다음과 같습니다.Item 2를 클릭합니다.Second 1대신 표시됩니다.Second 2왜요? 어떻게 고칠 거예요? var guid = 0; class Content extends React.Component { constructor() { guid += 1; this.id = guid; console.log('ctor', this.id); // called only once with 1 } render() { return ( {this.props.title} - {this.id} ); } } class MyApp extends React.Component { constructor() { this.items = ['Item 1..

it-source 2023.02.22

유형 선언의 @typescript-eslint/no-discript-false positive false 긍정

유형 선언의 @typescript-eslint/no-discript-false positive false 긍정 @typescript-eslint/no-unused-vars에는 1가지 문제가 있습니다.그래서 우리는 타입이 있다. type SomeType = (name: string) => void; 또한 유형 선언 문자열에 @typescript-eslint/no-unused-vars 오류가 있습니다.이 문자열은 'name'은 정의되어 있지만 사용되지 않습니다. 유형 사용 예: export const LogSomeInfo: SomeType = (name: string) => { const a = name; console.log(a); }; 또는 다음 중 하나를 선택합니다. interface CheckboxP..

it-source 2023.02.22

반응 구성 요소에 iframe 삽입

반응 구성 요소에 iframe 삽입 작은 문제가 있어요.서비스에 데이터를 요청한 후 iframe 코드를 받았습니다. 이걸 제 모달 컴포넌트에 소품으로 전달해서 전시하고 싶은데{this.props.iframe}렌더 함수에서는 스트링으로 표시됩니다. 리액트 또는 JSX를 사용하여 html로 표시하는 가장 좋은 방법은 무엇입니까?위험하게 사용하지 않으려면SetInnerHTML 을 사용하면, 이하에 나타내는 솔루션을 사용할 수 있습니다. var Iframe = React.createClass({ render: function() { return( ) } }); ReactDOM.render( , document.getElementById('example') ); 라이브 데모를 이용하실 수 있습니다 데모다음과 같이..

it-source 2023.02.12
반응형