bestscript

유형 스크립트로 반응 - React.forwardRef 사용 시 일반 정보 사용자가 커스텀을 전달할 수 있는 범용 컴포넌트를 작성하려고 합니다.OptionType컴포넌트에 접속하여 타입을 체크합니다.이 컴포넌트에는React.forwardRef. forwardRef 없이도 작동시킬 수 있습니다.좋은 생각 있어요?아래 코드: Forward Ref.tsx 미포함 export interface Option { value: OptionValueType; label: string; } interface WithoutForwardRefProps { onChange: (option: OptionType) => void; options: OptionType[]; } export const WithoutForwardRef..

개체를 파괴하고 결과 중 하나를 무시하는 중 다음과 같은 것이 있습니다. const section = cloneElement(this.props.children, { className: this.props.styles.section, ...this.props, }); 안에서.this.props, 나는 가지고 있다.styles복제 요소에 전달하지 않을 속성입니다. 어떻게 해야 할까?오브젝트 rest/spread 구문을 사용할 수 있습니다. // We destructure our "this.props" creating a 'styles' variable and // using the object rest syntax we put the rest of the properties available // from..

후크를 사용한 리액트 기능 컴포넌트와 클래스 컴포넌트 React에 후크가 도입되면서 현재 주요 혼란은 후크 및 클래스 컴포넌트와 함께 기능 컴포넌트를 사용해야 하는 시점입니다. 후크의 도움으로 얻을 수 있기 때문입니다.state 부분적인 「」lifecycle hooks이치노저는 다음과 같은 . 후크의 진정한 장점은 무엇입니까? 후크와 함께 기능 컴포넌트를 사용하는 경우와 클래스 컴포넌트를 사용하는 경우 예를 들어 후크가 있는 함수 컴포넌트는 클래스 컴포넌트와 마찬가지로 퍼포먼스에 도움이 되지 않습니다.를 빼놓을 수 .shouldComponentUpdate구현되었습니다.른른른른 른른른?Hooks:React.memo ★★★★★★★★★★★★★★★★★」React.lazy작성해야 하는 코드를 줄이고 유사한 액션을..

OnKeyDown 이벤트가 React의 div에서 작동하지 않음 리액트의 div에서 keyDown 이벤트를 사용하고 싶다.하고 있습니다. componentWillMount() { document.addEventListener("keydown", this.onKeyPressed.bind(this)); } componentWillUnmount() { document.removeEventListener("keydown", this.onKeyPressed.bind(this)); } onKeyPressed(e) { console.log(e.keyCode); } render() { let player = this.props.boards.dungeons[this.props.boards.currentBoard].pla..

React에서 조건부 스타일을 처리하는 올바른 방법 지금 리액트 하고 있는데 컨디셔닝 하는 '올바른' 방법이 있을까요?튜토리얼에서는 다음과 같이 사용합니다. style={{ textDecoration: completed ? 'line-through' : 'none' }} 저는 인라인 스타일링을 선호하지 않기 때문에 대신 클래스를 사용하여 조건부 스타일링을 제어하고 싶습니다.리액트(React)의 사고방식으로 접근하면 어떨까요?아니면 그냥 인라인 스타일링으로 할까요? 위 코드를 확인합니다.그것으로 족하다.클래스 이름을 사용하려면 반드시 클래스 이름을 사용하십시오. className={completed ? 'text-strike' : null} 클래스명 패키지도 도움이 될 수 있습니다.이 기능을 사용하면 코드..

반응 원어민에서 터치 가능 영역 제어 나는 정사각형이 있다.TouchableOpacity버튼: 그래픽은 가운데에 있는 작은 점 아이콘일 뿐이고 나머지는 투명한 배경입니다.많은 Android 기기에서는 불투명 영역만 터치할 수 있고 나머지는 터치할 수 없기 때문에 누르는 것이 매우 어렵다는 것을 알 수 있습니다. 만질 수 있는 영역을 제어할 수 있는 방법은 없습니까?TouchableOpacity단추 같은 다른 형제들도요?속성을 사용하여 터치 가능 영역을 늘릴 수 있습니다.이 기능은 늘어난 터치 영역이 다른 터치 가능 장치와 겹치지 않는다는 것을 알고 있는 경우에 유용합니다. 보다 견고한 솔루션은padding스타일 속성만질 수 있는 영역Touchable*구성 요소에는 요소의 패딩이 포함됩니다.참조하기 쉽도록..

리액션 라우터 포함 스토리북 - 외부 사용 금지 문제의 해결책을 게시하는 것은 선생님 구글링 기술이지만 찾기가 어려웠습니다. 리액트 라우터를 탑재한 앱은 문제없이 작동했지만 Storybook은 "Invariant failed: 외부에서 를 사용하지 마십시오. Error: Invariant failed: You should not use outside a at invariant (tiny-invariant.esm.js:11) at react-router-dom.js:181 at updateContextConsumer (react-dom.development.js:19747) at beginWork$1 (react-dom.development.js:20079) at HTMLUnknownElement.call..

반응: 이벤트 핸들러에서 null입니다. Login Form 컴포넌트가 있습니다.제출하기 전에 두 가지 모두 확인하고 싶습니다.loginName그리고.password설정되었습니다.이 코드를 사용하여 시도했습니다(많은 항목이 생략되었습니다). class LoginForm extends Component { constructor() { super(); this.state = { error: "", loginName: "", password: "", remember: true }; } submit(e) { e.preventDefault(); if(!this.state.loginName || !this.state.password) { //this is null this.setState({ error: "Fill..

암호 또는 window.msCrypto를 사용하여 함수를 테스트하는 방법 를 반응시킵니다.window.cryptoAPI를 사용합니다.난 아직 이 모든 것을 통합시킬 방법을 찾지 못했다.cryptoJest에서 다른 패키지를 설치하지 않고 작업을 수행할 수 없습니다. 다른 하지 않고 같은 .crypto.getRandomValues()스트트 충돌 ?? ????은 모두 합니다.하여 을 합니다.crypto글로벌하게 확장됩니다. 제스트가 할 수 있게 . window.crypto global.crypto(노드/타입 스크립트)입니다. 현재 대부분의 최신 브라우저와 Node.js 12+에서 사용할 수 있는를 사용합니다. const crypto = require('crypto'); Object.defineProperty(..

반응 - 양식 제출 방지 리액트로 실험을 해봤어요제 실험에서는 Reactstrap 프레임워크를 사용하고 있습니다.버튼을 클릭하면 HTML 양식이 제출됩니다.버튼을 클릭했을 때 양식 제출을 방지할 수 있는 방법이 있습니까? 여기서 내 문제를 재현했다.내 폼은 매우 기본적이고 다음과 같습니다. Buttons primary 제가 무엇을 빠뜨리고 있나요?먼저 javascript(일반 html)가 없으면form다음 중 하나를 클릭하면 요소가 전송됩니다.또는submits form toojavascript에서는 이벤트 핸들러를 사용하여 호출함으로써 이를 방지할 수 있습니다.e.preventDefault()버튼을 클릭하거나 양식을 제출합니다. e는 이벤트 핸들러에 전달되는 이벤트 객체입니다.react를 사용하면 2개의..