reactjs 19

Respect Router v4 - 현재 경로를 얻는 방법

Respect Router v4 - 현재 경로를 얻는 방법 표시하려고 합니다.title에현재 경로에서 어떻게든 전달되는 경로입니다. 리액트 라우터 v4의 경우현재의 경로를 통과시킬 수 있다title소품? 커스텀에서 커스텀 타이틀을 넘기는 방법이 있나요?prop에?react-router 5.1 릴리스에는 useLocation이라는 후크가 있으며, 이 후크는 현재 위치 개체를 반환합니다.이 기능은 현재 URL을 알아야 할 때 도움이 됩니다. import { useLocation } from 'react-router-dom' function HeaderView() { const location = useLocation(); console.log(location.pathname); return Path : {l..

programing 2023.04.04

오류: ENOENT: 해당 파일 또는 디렉터리가 없습니다. stat ... .steampath

오류: ENOENT: 해당 파일 또는 디렉터리가 없습니다. stat ... .steampath 오랫동안 작업하지 않은 React 프로젝트에서 개발 서버를 시작하려고 합니다." " " 시npm install ★★★★★★★★★★★★★★★★★」npm start제목 오류 메시지를 받았습니다. Node-Sass를 수동으로 업데이트하고 다운그레이드를 시도했지만 어떤 작업을 해도 동일한 오류가 발생합니다.에러 메세지의 전체는 다음과 같습니다. Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolv..

programing 2023.04.04

ReactJ의 라디오 버튼을 사용하는 방법

ReactJ의 라디오 버튼을 사용하는 방법 리액트J는 처음이라서 안 들리면 미안해요.수신한 데이터에 따라 여러 테이블 행을 생성하는 컴포넌트가 있습니다. 컬럼 내의 각 셀에는 무선 체크박스가 있습니다.에, 는 1개의 「1」을 할 수 .site_name 1개의 ★★★★★★★★★★★★★★.address기존 행에서 선택합니다.선택은 바닥글에 표시되어야 한다.그리고 그것이 내가 갇혀있는 곳이다. var SearchResult = React.createClass({ render: function () { var resultRows = this.props.data.map(function (result) { return ( {result.SITE_NAME} {result.ADDRESS} ); }); return ( ..

programing 2023.04.04

useEffect를 사용하면 첫 번째 렌더링에 효과 적용을 생략할 수 있습니까?

useEffect를 사용하면 첫 번째 렌더링에 효과 적용을 생략할 수 있습니까? React의 새로운 Effect Hooks를 사용하면 리렌더 간에 특정 값이 변경되지 않은 경우 이펙트를 적용하지 않도록 React에게 지시할 수 있습니다(React 문서의 예: useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changes 에서는 첫 번째 및에 이 됩니다.count다다 how. 하면 때 할 수 요?리액트에게 초기 렌더링에 대한 영향을 건너뛰도록 지시하려면 어떻게 해야 합니까?가이드의 설명대로 효과 후크(useEffect)는 함수 성분의 부작용을 수행하는 기..

programing 2023.03.25

리액트 기능 컴포넌트의 기능 화살표 또는 지방 화살표

리액트 기능 컴포넌트의 기능 화살표 또는 지방 화살표 이 질문에는 이미 답변이 있습니다. ES6에서 화살표를 사용하거나 사용하지 않고 최상위 기능을 만들 때의 장점과 단점은 무엇입니까? (2개의 답변) 닫힘4년 전에요. 리액트 기능 컴포넌트에 플레인 기능과 팻 화살표를 사용하는 것이 어떤 이점이 있는지 궁금하지 않을 수 없습니다. const MyMainComponent = () => ( Welcome to my app ) function MyMainComponent() { return ( Welcome to my app ) } 물론 둘 다 완벽하게 작동하지만, 그것들을 쓸 수 있는 권장 방법이 있나요?어느 한쪽을 지지하는 주장이 있는가? 편집: 사용하는 함수의 종류에 영향을 미칠 수 있는 플레인 자바스크..

programing 2023.03.25

href 및 onClick in ReactJS

href 및 onClick in ReactJS Reactjs.org에 따라 이벤트를 처리하고 아래 코드 기본 사용을 방지합니다. function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( Click me ); } 단, 다음과 같이 컨스트럭터에 바인딩을 추가해야 합니다. this.handleClick = this.handleClick.bind(this); 아래 코드로 원하는 동작을 얻을 수 있었습니다. doSomething(arg1,agr2)}>Click here 질문:어떤 것이 더 나은 선택입니까?첫 번째 옵션은 상태 저장 구성 요소를 사용해야 하며 두..

programing 2023.03.25

MUI - 컴포넌트를 중앙/오른쪽에 정렬하는 방법

MUI - 컴포넌트를 중앙/오른쪽에 정렬하는 방법 버튼을 부모 오른쪽에 맞추고 싶습니다. MUI에서 할 수 있는 방법이 있는지 궁금합니다.다음을 사용할 수 있습니다. 하지만 그렇게 되면 다른 걸 써야 할 거야일이 너무 많은 것 같아요. 아니면 그냥 오래된 CSS를 사용하는 게 나을 수도 있고float: right원소의 겉으로 보이는 영점 높이를 다루고 있습니다.MUI 5 이전: 이거 드셔보세요 Example MUI 5 업데이트: (Dipak 덕분에) 소품justify의ForwardRef(Grid)는 권장되지 않습니다.사용하다justifyContent대신 소품 이름이 바뀌었습니다. Example 업데이트: 최적의 솔루션은 Near Huscarl의 답변입니다. 그리드보다 스택을 사용하는 것이 좋습니다.항목 ..

programing 2023.03.25

호버에 다른 스타일 구성 요소 대상 지정

호버에 다른 스타일 구성 요소 대상 지정 스타일리시 컴포넌트의 허버에 대처하는 가장 좋은 방법은 무엇입니까?저는 버튼을 누르면 드러나는 포장 요소를 가지고 있습니다. 컴포넌트에 몇 가지 상태를 구현하고 속성을 호버로 전환할 수 있지만 스타일 컴포넌트를 사용하여 이 작업을 수행할 수 있는 더 나은 방법이 있는지 궁금합니다. 다음과 같은 것은 동작하지 않지만 이상적입니다. const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); &:not(:last-child) { margin-bottom: 2rem; } &:hover { .button { display..

programing 2023.03.20

React - 하위 DOM 요소에서 React 구성 요소를 가져오시겠습니까?

React - 하위 DOM 요소에서 React 구성 요소를 가져오시겠습니까? 특정 DOM 요소와 관련된 React 컴포넌트가 무엇인지 알고 싶습니다. 예를 들어, Div가 있고 React를 사용하여 전체 응용 프로그램을 렌더링한다고 가정합니다.div는 React 구성 요소에 의해 렌더링되어야 합니다. 하지만 어떤 구성 요소가 렌더링됩니까? React가 React 컴포넌트와 관련된 DOM 노드를 취득하기 위한 메서드 「getDOMNode」를 제공하고 있는 것은 알고 있습니다만, 그 반대입니다. 이게 가능합니까?아니요. React의 중심 개념은 DOM을 실제로 제어할 수 없다는 것입니다.대신 공장 기능이 제어됩니다.DOM에 있는 것은 컨트롤의 현재 렌더링입니다. 실제로 필요한 경우 객체를 글로벌 변수로 유지..

programing 2023.03.15