반응형

reactjs 24

React-js는 라벨의 'for' 속성을 무시합니다.

React-js는 라벨의 'for' 속성을 무시합니다. class'에 className을 사용해야 한다는 것은 알고 있습니다만, 어떻게 하면 'for' 속성을 유지할 수 있습니까? 다음 항목: Recipient: 는 다음과 같이 표시됩니다. Recipient: 리액트 사용 시 Chrome의 콘솔을 사용하여 속성을 변경할 수 없는 것이 귀찮습니다만, 방법이 없을까요?예를 들어 렌더링된 요소를 검사하고 수동으로 'for' 속성을 추가하면 해당 컨트롤에서 벗어나면 사라집니다(반작용으로 추측하는 컨트롤이 다시 설정되기 때문에).를 사용해야 합니다.htmlFor대신 속성을 부여하다 Recipient: forjavascript 키워드이기 때문에 JSX에서는 사용할 수 없습니다.를 사용해야 합니다.htmlFor로 번..

sourcetip 2023.04.03

반응 헬메트의 목적은 무엇입니까?

반응 헬메트의 목적은 무엇입니까? 서버측 리액트 앱을 작성했습니다.여기서 html을 반환할 수 있는 것은 다음과 같습니다. const html = renderToString(); ${html} 많은 분들이 쓰셨다고 들었어요.react-helmet머릿속에서 콘텐츠를 관리합니다.위와 같이 직접 포함하면 어떤 장점이 있는지 궁금합니다.react-helmet의 주요 이점은 트리에 여러 개의 컴포넌트가 있는 경우입니다. 그러나 리프 페이지 컴포넌트에는 두 페이지 구성 요소 사이에 동일한 속성 값을 가진 두 개의 메타 태그가 있습니다.name="description"우리 나무에서.중복으로 이어질 수 있다고 생각하겠지만react-helmet이 문제를 해결합니다. 리액트 헬메트는 리프 페이지에 도달한 경우 인덱스/사이..

sourcetip 2023.04.03

상태 변경 시 반응 구성 요소가 다시 렌더링되지 않음

상태 변경 시 반응 구성 요소가 다시 렌더링되지 않음 콘텐츠를 얻기 위해 API로 이동하는 리액트 클래스가 있습니다.데이터가 반환되는 것을 확인했지만 다시 렌더링되지 않습니다. var DealsList = React.createClass({ getInitialState: function() { return { deals: [] }; }, componentDidMount: function() { this.loadDealsFromServer(); }, loadDealsFromServer: function() { var newDeals = []; chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function..

sourcetip 2023.04.03

MVC vs. 플럭스 ? 양방향 vs.단방향?

MVC vs. 플럭스 ? 양방향 vs.단방향? 다음 그림(MVC에 대한 설명)을 보면 단방향 데이터 플로우가 보입니다. 그렇다면 MVC가 플럭스를 정당화하면서 양방향 데이터 흐름을 갖는다고 생각하는 이유는 무엇일까요? Real MVC와 Pure MVC는 단방향입니다.그것은 질문에 붙여진 위키피디아 도표에서 명확하다. 10여 년 전 Apache Struts와 같은 서버 측 프레임워크가 모델 뷰 프레젠터(MVP) 패턴이라고 불리는 MVC의 변형을 구현했을 때 모든 요청은 컨트롤러를 통과하고 모든 응답은 컨트롤러를 통해 반환되었습니다.다들 계속 MVC라고 불렀어요.웹 고유의 특성으로 인해 요청 또는 업데이트를 전송하지 않으면 모델의 변경 사항을 뷰에 반영할 수 없습니다.따라서 Pure MVC는 구현되지 않습니..

sourcetip 2023.03.29

React.render() 함수에 여러 개의 React 컴포넌트를 렌더링하는 방법이 있습니까?

React.render() 함수에 여러 개의 React 컴포넌트를 렌더링하는 방법이 있습니까? 예를 들어 다음과 같이 할 수 있습니다. import React from 'react'; import PanelA from './panelA.jsx'; import PanelB from './panelB.jsx'; React.render( , document.body ); 여기서 React는 다음을 렌더링합니다. body PanelA PanelB 현재 다음과 같은 오류가 발생합니다. Adjacent JSX elements must be wrapped in an enclosing tag browserify 및 babelify를 사용하여 변환하는 동안React v16.0 릴리스에서는 컴포넌트 내부에 있는 경우 아이..

sourcetip 2023.03.29

기능 컴포넌트가 있는 컨스트럭터를 지정하는 방법(팻 화살표 구문)

기능 컴포넌트가 있는 컨스트럭터를 지정하는 방법(팻 화살표 구문) 다음 컴포넌트가 지정됩니다. import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' const NewGoalInput = props => { return ( ) } const handleKeyUp = (e) => { if (e.key === "Enter") { // TODO Add goal } } export default NewGoalInput constructor를 사용하지 않고 상태를 정의할 수 있는 생성자를 추가하려면 어떻게 해야 합니까?extends React.Component구문?스테이트리스 컴포넌트이기 때문에 컴포넌..

sourcetip 2023.03.14

기록 사용, 리액트 큐브 돔 v6

기록 사용, 리액트 큐브 돔 v6 사용하고 있다react-router-dom version 6사용할 때this.props.history.push('/UserDashboard')동작하지 않습니다.로 바꿨습니다. const history = createBrowserHistory(); history.push('/UserDashboard') 하지만 아직 문제가 있어요 언제 로 리다이렉트하고 싶은지/UserDashboard링크만 변경해도 첫 번째 페이지는 그대로인가요? 도움이 필요하신가요?** handleSubmit(event){ event.preventDefault(); const history = createBrowserHistory(); axios({ method: "POST", url:"http://loc..

sourcetip 2023.03.14

React Functional Components의 모든 함수 핸들러에서 Callback을 사용해야 합니까?

React Functional Components의 모든 함수 핸들러에서 Callback을 사용해야 합니까? 예를 들어 다음과 같은 컴포넌트가 있다고 합시다. const Example = () => { const [counter, setCounter] = useState(0); const increment = () => setCounter(counter => counter + 1); return ( {counter} ); } 지나갔을 때onClick화살표 기능으로 핸들러, myeslint경고: error JSX props should not use arrow functions react/jsx-no-bind 이 투고로부터의 회답으로부터 읽었습니다.https://stackoverflow.com/questi..

sourcetip 2023.03.09

전환이 포함된 리액트모달(에 추가)을 작성하려면 어떻게 해야 합니까?

전환이 포함된 리액트모달(에 추가)을 작성하려면 어떻게 해야 합니까? 이 답변에는 https://stackoverflow.com/a/26789089/883571에 리액트 기반 모달(모달)을 추가함으로써 작성되는 모달(모달)이 있습니다.하지만 React에서 제공하는 트랜지션 애드온과 호환되지 않습니다. (진입 및 퇴출 중) 전환으로 작성하려면 어떻게 해야 합니까?Ryan Florence는 react conf 2015에서 포털을 사용하는 것을 시연했습니다.다음은 심플을 작성하는 방법입니다.Portal컴포넌트... var Portal = React.createClass({ render: () => null, portalElement: null, componentDidMount() { var p = this.p..

sourcetip 2023.03.09
반응형