cafebook

기능 컴포넌트 기본 소품 vs 기본 파라미터 리액트 기능 컴포넌트에서는 기본 소품을 설정하는 것이 좋습니다.Component.defaultProps또는 함수 정의의 디폴트파라미터를 사용하는 예를 나타냅니다. 기본 소품: const Component = ({ prop1, prop2 }) => ( ) Component.defaultProps = { prop1: false, prop2: 'My Prop', } 기본 파라미터: const Component = ({ prop1 = false, prop2 = 'My Prop' }) => ( ) defaultProps(핵심팀 중 한 명인 Dan Abramov에 따르면) 기능 컴포넌트에 대해서는 결국 권장되지 않으므로 향후에 대비한 기본 파라미터를 사용하는 것이 좋습니..

Uglify를 통한 웹 팩 최적화JS 플러그인으로 인해 런타임 오류가 발생함 웹 팩을 통해 번들되는 동형 React 어플리케이션을 가지고 있습니다. 2개의 번들 파일 출력에 대응하는 2개의 엔트리 포인트가 있습니다.vendors.js그리고.app.js. webpack-dev-server를 실행하는 경우 또는 최적화 플래그를 사용하지 않고 컴파일 하는 경우 모두 정상적으로 동작합니다.그러나 Uglify 플러그인을 사용하려고 하면 컴파일된 출력에 오류가 발생합니다. 시도했습니다. webpack -p webpack -optimize-minimize 또는 설정: new webpack.optimize.UglifyJsPlugin({sourceMap:false}) 그러나 모두 동일한 런타임 오류(정의되지 않은 변수)..

리액트와 함께 장고를 형성하다JS 저는 장고 템플릿을 사용하여 렌더링된 장고 양식을 가지고 있습니다.이제 양식 필드 중 하나(장기적으로는 둘 이상의 필드)에 React 구성 요소를 추가합니다. 지금까지 읽은 내용에 따르면, Django 템플릿과 React 렌더링을 혼합하지 않고 React에 JSON 데이터를 전송하는 백엔드 API로만 기능하도록 하는 것이 가장 좋은 방법인 것 같습니다.그래서 나는 지금 완전히 React를 통해 나의 양식을 다시 렌더링하려고 한다. 이제 forms.py 대신 serializers.py을 만들어 React로 전송할 데이터를 정의하고 환경에 Django Rest Framework를 설정했습니다.이제 이 데이터를 전송하는 방법을 알아보려고 합니다.Django/DRF와 React..

React Native 스타일링의 구성요소 간 간격 6개 있습니다.View컴포넌트(그림에 표시), 6개의 컴포넌트 사이에 공간을 두고 싶다.View구성 요소들. 내 코드: 그런 다음 각 행에 다른 빈 뷰를 추가하여 각 항목 사이에 공간을 만듭니다. 요소에 마진을 추가하는 것만으로 정상적으로 동작합니다. React Native 0.71.0부터는 속성을 사용할 수 있습니다.이러한 하위 보기에는 각 행/열 사이에 10픽셀의 간격이 있습니다. 를 사용하고 있는 경우map컴포넌트를 렌더링하는 함수에서는 다음 코드를 사용할 수 있습니다. // Change to the number of columns in your grid const numCols = 4; // Change to the spacing for each..

리액트 훅: 사용 중인 첫 번째 실행 건너뛰기 효과 이 질문에는 이미 답변이 있습니다. useEffect를 사용하면 첫 번째 렌더링에 효과 적용을 생략할 수 있습니까? (10개의 답변) 닫힘4년 전에요. 첫 번째 실행을 건너뛰는 방법useEffect갈고리를 채우다 useEffect(() => { const first = // ??? if (first) { // skip } else { // run main code } }, [id]); 후크는 모든 가변값을 저장하기 위해 사용할 수 있으므로 효과를 처음 실행하는지 여부를 나타내는 부울을 저장할 수 있습니다. 예 const { useState, useRef, useEffect } = React; function MyComponent() { const [co..

리액션이 포함된 쿠키 가져오기 사용자가 연결되었는지 확인해야 합니다.이를 위해 express-session을 사용하여 서버 측에서 설정한 쿠키를 읽습니다. app.use(session({ secret: 'crypted key', resave: false, saveUninitialized: true, cookie: { secure: false } // Put true if https })) app.post('/connect_user', (req, res) => { req.session.cookie.username = req.body.username findUserData('username', req.body.username, req, (userData) => { req.session.cookie.id = ..

여러 HOC 래퍼를 사용하여 React 컴포넌트를 내보내시겠습니까? 스타일 텍스트를 표시하는 React 컴포넌트가 있는데 네트워크 리소스를 로드하고 WebSocket 입력을 수신하며 알림을 표시하도록 하고 싶습니다.이를 위해 다음 각 항목에 대해 상위 컴포넌트 래퍼 함수를 작성합니다.withResource,withSocket,그리고.withNotifications. 컴포넌트를 수출할 때 이것이 맞습니까? class TextComponent extends React.Component { ... } export default withResource(withSocket(withNotifications(TextComponent))) 사용할 수 있습니다.composeredex 또는 recompose를 사용합니다...

jss 색상의 불투명도를 변경하는 방법 현재 저는 jss를 사용하여 요소에 색상을 추가하기 위해 아래 코드를 사용하고 있습니다. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) 색상에 따라 불투명도를 더하는 기능이 있는지 알고 싶습니다.theme.colors.red. 샘플 smt like:backgroundColor: color(theme.colors.red, .05),머티리얼 UI에는colorManipulator 유틸리티 파일, 여기에는alpha기능: import { alpha } from '@material-ui/core/styles/colorManipulator'; /** * Sets the absolut..

Axios에서 Ajax 요청을 취소/취소하는 방법 사용하고 있다axiosAjax 요청의 경우reactJS+flux렌더링 UI에 사용합니다.내 앱에는 서드파티 타임라인이 있다(리액트).JS 컴포넌트).타임라인은 마우스 스크롤로 관리할 수 있습니다.앱은 스크롤 이벤트 후 실제 데이터에 대한 Ajax 요청을 보냅니다.서버에서의 요청 처리가 다음 스크롤 이벤트보다 더 느릴 수 있다는 문제.이 경우 앱은 사용자가 스크롤을 더 하기 때문에 이미 사용되지 않는 몇 가지 요청(보통 2~3개)을 가질 수 있습니다.새로운 데이터를 수신할 때마다 타임라인이 다시 그려지기 때문에 문제가 됩니다.JS + 플럭스) 이 때문에 사용자는 타임라인의 움직임을 여러 번 볼 수 있습니다.이 문제를 해결하는 가장 쉬운 방법은 다음과 같이 ..

useEffect를 두 번 실행하는 이유와 React에서 적절하게 처리하는 방법 계산대와 계산대가 있습니다.console.log()에 있어서useEffect모든 변화를 기록할 수 있지만useEffect두 번 호출을 받습니다.리액트 18을 사용하고 있습니다.다음은 제 프로젝트의 Code Sandbox와 아래 코드입니다. import { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(5); useEffect(() => { console.log("rendered", count); }, [count]); return ( Counter {count} setCount(count + 1)}> c..