반응형

reactjs 25

너무 많은 리액트 컨텍스트 제공자

너무 많은 리액트 컨텍스트 제공자 새로운 Context API에 대해 고민하고 있습니다(Redux 등에 대해서는 아직 조사하지 않았습니다). 내가 해야 할 일의 대부분은 할 수 있을 것 같지만, 결국 메인 앱을 포장하기 위해 태그가 필요한 수많은 프로바이더와 함께 하게 될 것이다. Auth 프로바이더, Theming 프로바이더, 채팅 메시지 프로바이더(Pusher.com 참조)를 준비합니다.또한 React Router를 사용하는 것도 래퍼 요소입니다. 결국 이것(그리고 더 많은 것)으로 끝나야 하나요? 아니면 더 좋은 방법이 있을까요?서드파티 라이브러리가 없는 프로바이더를 위한 솔루션을 원하는 경우 Typescript 주석이 있는 솔루션을 다음에 제시합니다. // Compose.tsx interface ..

source 2023.04.04

반응 오류:스타일 프롭 값은 개체 반응/스타일 프롭 개체여야 합니다.

반응 오류:스타일 프롭 값은 개체 반응/스타일 프롭 개체여야 합니다. 이미지를 텍스트로 감싸려고 하는데 다음 코드를 사용하는 경우: This is where the other text goes about the swimmer 이제 나는 이것이 이해된다.style="float: left"html 5 입니다.단, 다음 코드를 사용하는 경우: This is where the other text goes about the swimmer 됐다!리액트에서 스타일을 사용할 수 없는 이유는 무엇입니까?리액션에서 스타일을 사용할 수 있습니다.시도:style={{float: 'left'}}문제는 당신이 스타일에 집착하고 있다는 것입니다.String대신Object. React는 오브젝트 표기의 스타일을 전달합니다. styl..

source 2023.03.25

ReactJs - 새로운 useStateRespect 후크의 preState?

ReactJs - 새로운 useStateRespect 후크의 preState? 저는 새로운 리액트 훅이 정말 마음에 들어서 현재 진행 중인 프로젝트에서 자주 사용하고 있습니다.prevState를 사용하고 싶은 상황이 발생하였습니다.useState훅은 잘 모르겠지만 어떻게 해야 할지 모르겠어요. 이런 걸 해봤는데 컴파일이 안 돼요. const [ someState, setSomeState ] = useState( new Map() ) setSomeState( prevState.someState.set( key, value ) ) (그런데 체크박스의 배열을 매핑하여 체크박스가 표시되어 있는 체크박스를 추적합니다.) 여기서 이 예를 따르려고 하는데setState기능. 도와줘서 고마워요!객체의 경우 분산 연산자..

source 2023.03.25

react js에서 이미지 src를 동적으로 제공하는 방법

react js에서 이미지 src를 동적으로 제공하는 방법 이미지명을 src로 동적으로 지정하려고 합니다.패스와 함께 변수를 사용하여 이미지 이름을 동적으로 설정하고 싶은데 src를 올바르게 설정할 수 없습니다.stackoverflow에 대한 솔루션을 시도했지만 아무 것도 작동하지 않습니다. 이렇게 길을 내려고 했는데 이렇게 경로를 지정하면 이미지가 src/img 경로에 저장됩니다. 이미지가 표시됨 이 질문은 전에도 한 적이 있지만 나에게는 효과가 없는 질문입니다.이미지 경로를 설정하려면 어떻게 해야 합니까?이미지를 필요로 하지 않으면 모든 이미지를 공용 폴더에 넣은 후 이 방법은 효과가 있습니다.require를 계속 사용할 수 있습니다. 공용 폴더에 이미지를 수동으로 추가하는 것은 권장되지 않습니다.답..

source 2023.03.20

react hooks useEffect() 청소는 componentWillUnmount만 해당합니까?

react hooks useEffect() 청소는 componentWillUnmount만 해당합니까? 이 코드의 결과를 알기 쉽게 설명해 드리겠습니다. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { ..

source 2023.03.20

이력 푸시와 치환의 트레이드오프는 무엇입니까?

이력 푸시와 치환의 트레이드오프는 무엇입니까? 이력 패키지를 사용하여 비활성 URL을 리액트 컴포넌트의 404 페이지로 리다이렉트합니다. 사용하고 있다.replace대신.push단순히 내가 방문한 잘못된 URL이 브라우저에 기록되지 않기를 바라기 때문이다. 제가 요점을 놓쳤나요?그리고 내 목적을 위해 둘 중 하나를 선택하는 것 사이에 트레이드오프가 있나요? 누가 설명 좀 해줄래? 잘부탁해 ;)네가 옳은 생각을 한 것 같아. 저는 개인적으로.replace유효하지 않은 URL에서 리다이렉트 할 때(또는 관련이 없는 경우, 즉 로그 사용자가 "/filename" URL로 이동할 때 "profile" 페이지로 리다이렉트 할 때), 브라우저의 "back" 버튼을 사용하면 최종 사용자가 올바르게 동작합니다.rout..

source 2023.03.15

useNavigate()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다.

useNavigate()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다. 아래 코드를 참조하십시오.이 버튼을 추가하여 이전 페이지로 돌아가려고 합니다.react-router-dom하지만 아래 오류가 발생하고 웹 사이트의 모든 컴포넌트가 사라집니다. 오류: useNavigate() may be used only in the context of a component 내 코드: function App() { const navigate = useNavigate(); return ( navigate(-1)}>go back ); } 콘솔에 표시되는 오류는 다음과 같습니다. 이 오류는 useNavigate를 발생시킵니다.useInRouterContext는 컴포넌트(가useNavigate훅)은 의 후손입니다.. 여기 ..

source 2023.03.15

무효 번호에 대응하는 PropType을 선언하려면 어떻게 해야 합니까?

무효 번호에 대응하는 PropType을 선언하려면 어떻게 해야 합니까? 를 찾고 있습니다.PropType즉, "이 값은 필수이며 숫자가 되거나 null이 됩니다." 즉, 지금 제가 가지고 있는 것은 PropTypes.number.isRequired 하지만 그것은 경고입니다.null가치가 전달되지만, 나는null허용 가능한 값이어야 합니다.사용방법: PropTypes.number 기본적으로는 모든 소품 유형이 필요하지 않습니다(예: 허용).null 또는 undefined)을(를) 팝업하지 않는 한.isRequired끝부분에서요. Proptypes의 전체 문서는 다음 URL에서 볼 수 있습니다. https://reactjs.org/docs/typechecking-with-proptypes.html 다음과 같..

source 2023.03.15

React-Native에서 실패한 propType on Image 구성 요소

React-Native에서 실패한 propType on Image 구성 요소 React-native로 시작한 지 얼마 안 되어 React가 웹 어플리케이션을 만드는 방법을 잘 이해하고 있습니다.웹 리액션에서는 전혀 발생하지 않았던 혼란스러운 문제가 발생하고 있습니다. 기본적으로 부모 컴포넌트의 객체 배열에 매핑하여 이미지가 동적으로 생성되는 컴포넌트를 렌더링합니다. export default class ImageComponent extends React.Component { render() { return ( ); } }; 그리고 그 부모 컴포넌트: export default class MainComponent extends React.Component { constructor(props) { super..

source 2023.03.10

Fetch Post 콜 후 리다이렉트

Fetch Post 콜 후 리다이렉트 Access Management(AM) 서버에서 소셜 로그인 페이지를 만들고 있습니다.사용자가 로그인 버튼을 클릭하면 AM 서버에 대해 fetch http post 콜을 발신합니다.AM 서버는 소셜 로그인 페이지에 대한 인증 쿠키를 사용하여 HTTP 301 리다이렉트 응답을 생성합니다.어떻게든 이 리다이렉트 응답을 팔로우하여 새로운 콘텐츠를 웹 브라우저에 표시해야 합니다. UI: 반응JS 요청: POST /api/auth/socialauth/initiate HTTP/1.1 Host example.com User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0) Accept */* Accept-Language en-US,..

source 2023.03.10
반응형