반응형

Reactjs 31

ES6 구문을 사용하여 온클릭 이벤트를 통해 전달 매개 변수 반응

ES6 구문을 사용하여 온클릭 이벤트를 통해 전달 매개 변수 반응 ES6 구문을 사용하여 추가 파라미터를 onClick 이벤트에 전달하는 방법 예: handleRemove = (e) => { } render() { } ID를 전달하고 싶다.handleRemove다음과 같이 기능합니다. 에서 그것을 기억하십시오.onClick={ ... },그...는 JavaScript 표현입니다.그렇게 ... onClick={this.handleRemove(id)} 와 같다 var val = this.handleRemove(id); ... onClick={val} 즉, 당신이 전화하는 전화는this.handleRemove(id)즉시, 그리고 그 값을 전달한다.onClick그건 네가 원하는 게 아니야 대신 인수 중 하나가 ..

itsource 2023.03.08

React 컴포넌트의 양식에 검증을 추가하려면 어떻게 해야 합니까?

React 컴포넌트의 양식에 검증을 추가하려면 어떻게 해야 합니까? 내 연락처 페이지 양식은 다음과 같습니다. Send Message 모든 필드에 대한 검증을 추가해야 합니다.이 리액션 폼에 검증을 추가할 수 있는 사람이 있습니까?, .onChange★★★★★★ 。 변경할 때마다 변경된 필드의 상태를 업데이트합니다. 그러면 해당 필드가 비어 있는지 또는 원하는 다른 필드를 쉽게 확인할 수 있습니다. 다음과 같은 작업을 수행할 수 있습니다. class Test extends React.Component { constructor(props) { super(props); this.state = { fields: {}, errors: {}, }; } handleValidation() { let fields = ..

itsource 2023.03.08

React에서 내보내기(기본값) 클래스JS

React에서 내보내기(기본값) 클래스JS 컴포넌트를 만드는 경우 다양한 방법으로 클래스를 만들 수 있습니다.이것들은 무엇이 다릅니까?어떤 것을 사용해야 하는지 어떻게 알 수 있나요? import React, {Component} from 'react' export default class Header extends Component { } export const Header = React.createClass({ }) export default React.createClass({ }) 다른 일을 하는 것 같아요 아니면 그냥 구문만 다를 뿐인가요? 누군가 간단한 설명이나 링크를 주시면 감사하겠습니다.차이가 무엇인지 정확히 알지 못하는 상태에서 새로운 틀로 시작하고 싶지는 않습니다.React에 오신 것을 ..

itsource 2023.02.26

플랫리스트를 다시 렌더링하는 방법

플랫리스트를 다시 렌더링하는 방법 ListView와 달리 이 . state . datasource는 갱신할 수 있습니다.Flat List를 업데이트하거나 다시 렌더링하는 방법이나 예가 있습니까? 제 목표는 사용자가 버튼을 눌렀을 때 텍스트 값을 업데이트하는 것입니다... renderEntries({ item, index }) { return( this.setState({value: this.state.data[index].value+1})> {this.state.data[index].value} ) } { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} renderItem={this.renderEn..

itsource 2023.02.26

약속 오류: 개체가 반응 자식 개체로 유효하지 않습니다.

약속 오류: 개체가 반응 자식 개체로 유효하지 않습니다. 사용자 에이전트를 사용하여 json을 상태로 설정하려고 하면 다음 오류가 나타납니다. 적발되지 않은 불변 위반:개체가 React 하위 개체로 유효하지 않습니다(찾은 개체: 키가 {...}인 개체).}). 자녀 컬렉션을 렌더링하는 경우 어레이를 대신 사용하거나 React 애드온에서 createFragment(개체)를 사용하여 개체를 래핑합니다. method to set state: getInitialState: function(){ return { arrayFromJson: [] } }, loadAssessmentContacts: function() { var callback = function(data) { this.setState({arrayFr..

itsource 2023.02.14

웹 팩을 사용하여 라이브러리 소스 맵을 로드하는 방법

웹 팩을 사용하여 라이브러리 소스 맵을 로드하는 방법 웹 팩으로 두 개의 프로젝트를 만들고 있습니다. 하나는 라이브러리입니다. 래퍼 프로젝트를 작성할 때 라이브러리 프로젝트의 소스 맵을 사용할 수 있습니까?래퍼 UI에서 라이브러리 코드를 디버깅하는 기능을 원합니다. 내 빌드는 라이브러리가 내장되어 있기 때문에 올바르게 기능합니다.유일한 문제는 소스 맵입니다.소스맵을 사용할 수 없기 때문에 브라우저 디버거에 표시되는 JavaScript가 비활성화되어 있습니다. 프로젝트 구조의 일부: +-- my-ui/ +-- dist/ +-- my-ui.js +-- my-ui.js.map +-- node_modules/ +-- my-lib/ +-- dist/ +-- bundle.js +-- bundle.js.map 토막토..

itsource 2023.02.14

Eslint 오류 - 화살표 본문을 둘러싼 예기치 않은 블록 문입니다. 반환된 값을 = 바로 다음에 이동합니다.>

Eslint 오류 - 화살표 본문을 둘러싼 예기치 않은 블록 문입니다. 반환된 값을 = 바로 다음에 이동합니다.> "Failed to Compile" (컴파일하지 못했습니다)라는 에러가 표시된다.Unexpected block statement surrounding arrow body; move the returned value immediately after the => 파일: { this.state.items.map((item) => { return ( {item.mainContact.phone} ); }) } 제가 실수를 이해할 수 있도록 도와주실 수 있는 분은 누구라도 좋습니다. 감사해요. 갱신하다 .eslintrc.json 파일: { "env": { "browser": true, "jest": t..

itsource 2023.02.14

JSX/TSX에서 TypeScript 캐스트를 사용하는 방법

JSX/TSX에서 TypeScript 캐스트를 사용하는 방법 캐스팅할 때.tsx파일, 컴파일러는 JSX로 가정합니다.예를 들어 다음과 같습니다. ( event.target).value 에러를 표시하다 JSX 요소 유형 'HtmlInputElement'는 JSX 요소의 생성자 함수가 아닙니다. TypeScript는 어떻게 캐스트합니까?.tsx파일링?그as연산자는 TypeScript 1.6에서 캐스트를 대체하기 위해 도입되었습니다..tsx파일, 예: (event.target as HTMLInputElement).value TypeScript wiki에서는 1.6의 변경에 대해 설명하고 있습니다.새로운 연산자가 캐스트하는 기본 방법이 됩니다(JSX 식과 TypeScript 프리픽스 캐스트 연산자 간의 모호성 ..

itsource 2023.02.14

응답 텍스트 파일을 읽는 방법

응답 텍스트 파일을 읽는 방법 스크린샷 1 스크린샷 2 리액트 프로젝트 내의 텍스트파일에서 읽고 싶은데 실행 및 읽기를 시도하면 콘솔로그에 HTML 샘플코드가 표시됩니다.기능은 다음과 같습니다. `onclick= () =>{ fetch('data.txt') .then(function(response){ return response.text(); }).then(function (data) { console.log(data); }) };` 그리고 그것을 부르는 버튼: ` click string` 아래 코드를 사용해 보면 알 수 있습니다. import React, { Component } from 'react'; class App extends Component { constructor(props) { sup..

itsource 2023.02.14

반응 후크 - 개체 집합에서 중첩된 속성이 변경되면 useEffect를 트리거합니다.

반응 후크 - 개체 집합에서 중첩된 속성이 변경되면 useEffect를 트리거합니다. 페이지에 개체 목록이 표시됩니다.[{name:, age:}, ...]두 번째 페이지에서 특정 개체의 이름을 업데이트할 수 있습니다.그러면 후크를 사용하여 어떻게 구현해야 합니까?useEffect()이름 변경이 감지되었을 때만 1면 목록이 업데이트되는 건가요? const [objects, setObjects] = useState([]); useEffect(()=> { getAllObjects() },[getAllObjects, objects]); 전체 개체를 종속 배열에 전달하는 대신 이름만 전달해야 합니다.이름을 돌려서 할 수 있는 일 const [objects, setObjects] = useState([]) useE..

itsource 2023.02.10
반응형