반응형

reactjs 28

React 확인란 이벤트 및 핸들러의 스크립트 유형을 선택하십시오.

React 확인란 이벤트 및 핸들러의 스크립트 유형을 선택하십시오. 타이프스크립트에 있는 리액트 예시와 같은 것을 만들고 있습니다.목표는 상태를 가진 부모를 갖는 것이며 클릭을 다시 부모에게 전달하는 여러 상태 비저장 하위 구성 요소를 생성하는 것입니다. 이 예는 Javascript에 있기 때문에 입력 상자 이벤트와 onChange 핸들러의 종류를 알 수 없습니다...?저는 몇 가지 옵션을 시도해 봤어요React.MouseEvent하지만 그건 추측일 뿐이야 부모 컴포넌트가 imageRows를 생성하여 핸들러를 전달합니다. render() { } // what should the type of e be? onChange(e:any){ } ImageRow 컴포넌트 export interface ImageRo..

programing 2023.02.27

리액트 테스트 라이브러리에서 체크박스를 켜려면 어떻게 해야 하나요?

리액트 테스트 라이브러리에서 체크박스를 켜려면 어떻게 해야 하나요? 달성하려고 하는 이 매우 간단한 것에 대한 문서를 많이 찾을 수 없는 것 같습니다. 드롭다운이 있습니다.display: none체크박스를 클릭하면display: block제가 말하고자 하는 것은 체크박스를 클릭하면 expect(getByLabelText('Locale')).toHaveStyle(` display: none; `) getByLabelText('Locale').checked = true expect(getByLabelText('Locale')).toHaveStyle(` display: block; `) 코드는 예상대로 동작하지만 테스트는 두 번째 예상 블록에서 실패하고 있습니다.display: none 이것을 주장하는 올바른..

programing 2023.02.27

리액트 훅을 내부 루프 또는 네스트 함수로 호출할 수 없는 이유는 무엇입니까?

리액트 훅을 내부 루프 또는 네스트 함수로 호출할 수 없는 이유는 무엇입니까? React Hooks 문서에서는 루프, 조건 또는 네스트된 함수의 내부에서 Hooks를 호출하지 않도록 되어 있습니다. 실행순서가중요하다는것을알고있기때문에React는어떤상태가어떤useState콜에대응하는지알수있습니다.그 때문에, 조건내에서 훅을 호출할 수 없는 것은 명백합니다. 하지만 우리가 전화해도 뭐가 문제인지 모르겠다.useState시간이 지나도 반복 횟수가 변하지 않는 루프 내부입니다.다음은 예를 제시하겠습니다. const App = () => { const inputs = []; for(let i = 0; i < 10; i++) { inputs[i] = useState('name' + i); } return input..

programing 2023.02.22

sh: react-module: npm start 실행 후 명령을 찾을 수 없습니다.

sh: react-module: npm start 실행 후 명령을 찾을 수 없습니다. 리액트 애플리케이션을 시스템에 복제하고 다음 명령을 실행했습니다. npm install -g create-react-app npm install --save react react-dom 그 후 나는 달렸다. npm start 그러나 위에서 언급한 에러가 발생했습니다.다른 시스템에서는 정상적으로 동작하고 있습니다.그러나 Windows 또는 Mac을 복제한 후에는 다른 시스템에서 작동하지 않습니다.node_modules디렉토리가 존재합니다.클론 이다.node_modules은).gitignore) 솔루션 려려를 npm install (오류)yarn하여 모든 를 사용하여 모든 dep이 다운로드되었는지 확인합니다. 대체 솔루션 ..

programing 2023.02.22

리액트 라우터 2.0.0-rc5에서 현재 루트를 얻는 방법

리액트 라우터 2.0.0-rc5에서 현재 루트를 얻는 방법 다음과 같은 라우터가 있습니다. 달성하고 싶은 것은 다음과 같습니다. 사용자 리다이렉트/login로그인하지 않은 경우 사용자가 에 접속하려고 했을 경우/login이미 로그인한 경우 루트로 리다이렉트합니다./ 그래서 지금 사용자 상태를 확인하려고 합니다.App의componentDidMount다음 작업을 수행합니다. if (!user.isLoggedIn) { this.context.router.push('login') } else if(currentRoute == 'login') { this.context.router.push('/') } 문제는 현재 경로를 얻을 수 있는 API를 찾을 수 없다는 것입니다. 이 닫힌 문제는 Router를 사용하는 것..

programing 2023.02.22

루트 파라미터 변경 또는 쿼리 변경 시 React가 컴포넌트 데이터를 새로고침하지 않음

루트 파라미터 변경 또는 쿼리 변경 시 React가 컴포넌트 데이터를 새로고침하지 않음 링크가 있는 "홈" 컴포넌트가 있으며 링크를 클릭하면 제품 컴포넌트가 제품에 로드됩니다.또한 "최근 방문한 제품"에 대한 링크를 항상 볼 수 있는 다른 컴포넌트도 있습니다. 이러한 링크는 제품 페이지에서 작동하지 않습니다.링크를 클릭하면 URL이 업데이트되고 렌더가 발생하지만 제품 구성요소가 새 제품으로 업데이트되지 않습니다. 다음 예제를 참조하십시오.Codesandbox 예제 index.js 루트는 다음과 같습니다. } /> } /> } /> to Home ; Product History의 링크는 다음과 같습니다. {product.name} 그래서 그것들은Route path="/products/:product". 제..

programing 2023.02.22

웹 팩 빌드에 git commit 해시 및 날짜 포함

웹 팩 빌드에 git commit 해시 및 날짜 포함 react/es6/webpack을 사용하고 있습니다.빌드 및 git 해시의 날짜를 앱 어딘가에 표시하고 싶습니다.가장 좋은 방법은 무엇입니까?웹 팩의 DefinePlugin을 사용할 수 있습니다. // get git info from command line let commitHash = require('child_process') .execSync('git rev-parse --short HEAD') .toString() .trim(); ... plugins: [ new webpack.DefinePlugin({ __COMMIT_HASH__: JSON.stringify(commitHash) }) ] ... 그러면 앱에서 사용할 수 있습니다.__COMMI..

programing 2023.02.22

React에서 "colSpan" 속성을 추가하는 방법JS

React에서 "colSpan" 속성을 추가하는 방법JS 아래 ReactJS TypeScript 코드에 colSpan="2" 특성을 추가하려고 하면 "Type string is not assignable to type number" 오류가 표시됩니다.어떻게 하면 고칠 수 있을까요? class ProductCategoryRow extends React.Component { constructor(props: MyProps) { super(props); } render() { return ( { this.props.category } ); } //end render. } //end class. 해보셨어요?{ this.props.category}?언급URL : https://stackoverflow.com/qu..

programing 2023.02.22
반응형