powerit

리액트 - 스타일 컴포넌트를 사용한 패싱 소품 방금 읽었어요styled-components 다음 사항이 잘못되어 렌더링 시간에 영향을 미친다는 문서입니다.그렇다면 어떻게 코드를 리팩터링하고 필요한 소품을 사용하여 역동적인 스타일을 만들 수 있을까요? 잘 부탁드립니다. 탭 컴포넌트 import React from 'react' import styled from 'styled-components' const Tab = ({ onClick, isSelected, children }) => { const TabWrapper = styled.li` display: flex; align-items: center; justify-content: center; padding: 100px; margin: 1px; fon..

반응 16.7 - 반응.SFC는 폐지되었습니다. 다음과 같이 상태 비저장 구성 요소를 선언합니다. const example: React.SFC = ({propsType}) => (); 그러나 SFC는 이제 폐지되었다.아마 Dan Abramov가 트위터에 올린 글이 그 이유를 설명해 줄 것이다. SFC가 폐지되었으므로 무엇을 사용해야 합니까? 를 사용해 주세요.React.FunctionComponent: React의 SFC 이름을 Functional Component로 변경합니다. 이 PR의 이름 변경React.SFC그리고.React.StatelessComponent로.React.FunctionComponent오래된 이름의 폐지된 에일리어스를 도입하고 있습니다. 예를 들면 다음과 같습니다. const ex..

리액트의 cdn/script 태그에서 javascript 패키지를 Import하려면 어떻게 해야 하나요? 이 javascript 패키지를 React에 Import하고 싶습니다. 단, NPM 패키지가 없기 때문에 Import할 수 없습니다. import dwolla from 'dwolla' 또는 import dwolla from 'https://cdn.dwolla.com/1/dwolla.js' 그래서 내가 노력 할 때마다 dwolla.configure(...) dwolla가 정의되어 있지 않다고 하는 에러가 표시됩니다.이거 어떻게 풀어요? 감사해요.index.html 파일로 이동하여 스크립트를 Import합니다. 그런 다음 dwolla를 가져오는 파일에서 변수를 설정합니다. const dwolla = wi..

Respect.js: 기본값을 프로펠러로 설정 여러분, 저는 간단한 버튼을 만드는 이 컴포넌트를 만들었습니다. class AppButton extends Component { setOnClick() { if(!this.props.onClick && typeof this.props.onClick == 'function') { this.props.onClick=function(){ alert("Hello"); } } } setMessage() { if(!this.props.message){ this.props.message="Hello" } } render(){ this.setOnClick() this.setMessage() return ( {this.props.message} ) } } 그리고 2개의 버튼..

대응 | 페이지 갱신 검출 방법 (F5) React js를 쓰고 있어요.검출할 필요가 있다page refresh사용자가 새로 고침 아이콘을 누르거나 F5를 누르면 이벤트를 확인해야 합니다. javascript 기능을 사용하여 stackoverflow 포스트를 시도했습니다. javascript 기능을 사용했습니다.beforeunload여전히 운이 없군 onUnload(event) { alert('page Refreshed') } componentDidMount() { window.addEventListener("beforeunload", this.onUnload) } componentWillUnmount() { window.removeEventListener("beforeunload", this.onUnl..

적발되지 않은 불변 위반:이전 렌더링 때보다 더 많은 후크가 렌더링되었습니다. 다음과 같은 컴포넌트가 있습니다(매우 간단한 버전). const component = (props: PropTypes) => { const [allResultsVisible, setAllResultsVisible] = useState(false); const renderResults = () => { return ( More results v { allResultsVisible && ... } ); }; return { renderResults() }; } 되고 있는 합니다.「 」Uncaught Invariant Violation: Rendered more hooks than during the previous render.이..

플럭스 앱에서 어디에 아약스 요청을 해야 합니까? 플럭스 아키텍처로 react.js 어플리케이션을 만들고 있는데 서버로부터의 데이터 요구 장소와 타이밍을 파악하고 있습니다.이에 대한 예가 있습니까?(TODO 앱 아님)저는 비동기 쓰기 작업을 작업 작성자에 넣고 비동기 읽기 작업을 스토어에 넣는 것을 적극 지지합니다.목표는 스토어 상태 수정 코드를 완전히 동기화된 액션핸들러로 유지하는 것입니다.이것에 의해, 간단하게 추론할 수 있어 유닛 테스트도 간단하게 실시할 수 있습니다.동일한 엔드포인트에 대한 여러 동시 요청을 방지하기 위해(예: 이중 읽기) 실제 요청 처리를 여러 요청을 방지하는 약속을 사용하는 별도의 모듈로 이동합니다. 예를 들어 다음과 같습니다. class MyResourceDAO { get(i..

네스트된 객체에 대해 State를 설정하려면 어떻게 해야 합니까? 사용하고 있는 플러그인의 경우는, 다음과 같은 상태가 필요합니다. getInitialState() { return { invalid: true, access: { access_code: '', zipcode: '', password: '', confirm: '', hospital_id: '', }, } }, 나머지 액세스 권한을 설정하지 않고 hospital_id 상태를 설정하려면 어떻게 해야 합니까? 그러면 hospital_id를 제외한 모든 것이 삭제됩니다. this.setState({access: {hospital_id: 1}}) 몇 가지 옵션이 있습니다. ECMA6에서는 오브젝트 스프레드 제안을 사용할 수 있습니다....)는 갱신된..

다른 인수로 같은 함수를 두 번 조롱합니다. JEST는 처음이고 현재 onComponentDidMount에서 API 호출을 하는 Javascript 컴포넌트를 테스트하고 있습니다.Ajax 콜(api 콜)의 반환 데이터에 따라 컴포넌트는 표 또는 단순한 텍스트를 표시합니다. JEST 테스트는 매우 간단합니다.현재로서는, 현재의 스냅샷과 일치하는 테스트만을 실시합니다.따라서 API 호출은 서로 다른 데이터를 반환할 수 있으므로 스냅샷은 1) 표 포함 2) 단순 텍스트 포함 두 가지 측면이 있습니다. 나는 그렇게 서비스를 조롱하는 데 성공했다 jest.mock("/myService", () => ({ index: (data, callback) => { const return = [ { {...} }, ] ca..

Sublime Text 3에서 JSX 파일에 대해 Emet을 활성화하려면 어떻게 해야 합니까? 이전에 Alan Hortle의 JSX 패키지를 사용하다가 구문 강조 표시 처리 방법에 문제가 발생했습니다.그리고 공식 패키지인 숭고한 반응이 있다는 것을 알게 되었다. 앨런 호틀의 패키지로, 그는 작은 조각 하나를 포함시켰습니다Preferences > Key Bindings – User다음과 같은 Emet 기능을 활성화합니다. { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js.jsx", "operator": "equal", "match_all": true, "key": "selector" ..