megabox

Next.js background-image css 속성이 이미지를 로드할 수 없습니다. 문제는 단순히 React 내의 인라인 backgroundImage 속성 내에서 사용하기 위해 정적 이미지에 액세스하려고 한다는 것입니다. reactjs와 next.js를 사용하고 있는데 next.js를 사용하여 이미지를 추가하는 문제가 발생했지만 Next.js + Images라는 이미지 로더를 사용하여 이를 수정했습니다. 이제 일반 html img 태그로 이미지를 정상적으로 추가할 수 있게 되었습니다. 예:이건 효과가 있어요 css 배경 이미지를 다음과 같이 추가하려고 했습니다. const team = (props) => { const img = require("../../assets/images/security-t..

리액트 시 setState 함수의 TypeScript 유형을 정의하려면 어떻게 해야 합니까?디스패치>가 접수되지 않았습니까? 입력 요소가 있는 React DatePicker 컴포넌트가 있습니다.onChange 이벤트를 처리하기 위해 onChangeHandler 함수를 정의했습니다.단, onChangeHandler에서 파라미터로 전달되는 모든 함수의 유형을 정의하면 다음 오류가 발생합니다. '(값: 문자열) => void' 형식의 인수는 '디스패치' 형식의 매개 변수에 할당할 수 없습니다.매개 변수 'value'와 'value' 유형이 호환되지 않습니다.'StateAction' 유형은 'string' 유형에 할당할 수 없습니다.'(prevState: string)' => string' 유형은 'string..

ReactJ는 공백이 없는 문자열을 렌더링합니다. & 등의 문자를 넣을 수 있는 스트링이 있는 소품이 있습니다.공백도 포함되어 있습니다.모든 공간을 다음으로 바꾸고 싶다. . 제가 이걸 쉽게 할 수 있는 방법이 있을까요?다음 구문을 사용하여 렌더링만 할 수는 없습니다. HTML 엔티티를 마크업으로 대체해야 하기 때문입니다.너무 낮은 수준인 것 같아, 난 이걸 하고 싶지 않아요. 제가 할 수 있는 방법이 있을까요?를 사용하는 대신 HTML 엔티티, Unicode 문자를 사용할 수 있습니다. (U+00A0 Non-Breaking Space): {myValue.replace(/ /g, "\u00A0")} 오래된 질문이라는 것은 알고 있습니다.이 질문으로는 원하는 대로 되지 않습니다만, 스트링을 편집하는 것이 ..

렌더링하는 동안 React 구성 요소가 일시 중단되었지만 폴백 UI가 지정되지 않았습니다. 나는 이 새로운 리액트 앱을 막 시작했다. 사용하고 있었습니다.컴포넌트에 있는 엘리먼트를 제거했습니다.그 후, 애플리케이션이 크래쉬 해, 상기의 에러가 발생합니다. 에 대해 너무 잘 모르면서 쉽게 해결할 수 있는 방법이 없을까요?? 넌 두가지 옵션이 있다 : 서스펜스를 사용하지 않고 i18n.js를 다음과 같이 설정할 수 있습니다. i18n .use(XHR) .use(LanguageDetector) .init({ react: { useSuspense: false //

컨스트럭터 또는 componentWillMount에서 초기 반응 구성 요소 상태를 설정합니다. 리액트 컴포넌트에서는 초기 상태를 컨스트럭터() 또는 componentWillMount()로 설정하는 것이 좋습니까? export default class MyComponent extends React.Component{ constructor(props){ super(props); this.setState({key: value}); } } 또는 export default class MyComponent extends React.Component{ componentWillMount(props){ this.setState({key: value}); } } 컨스트럭터에서는 ES6 클래스를 사용하는 것이 좋습니다만,s..

리액트 renderToString() 퍼포먼스 및 캐시 리액트컴포넌트 이 '아까부터'가 에 띄었어요.reactDOM.renderToString()서버에서 큰 컴포넌트 트리를 렌더링할 때 메서드가 크게 느려지기 시작합니다. 배경 약간 배경화면.시스템은 완전 동형 스택입니다. 레벨 ' ' ' '''App구성 요소는 템플릿, 페이지, 돔 요소 및 기타 구성 요소를 렌더링합니다.코드를 의 컴포넌트컴포넌트로 를 렌더링하고 있는 을 알 수 .this is a react component. 개발 시 최대 1500개의 컴포넌트를 렌더링하는 데 최대 200~300ms가 소요됩니다.일부 컴포넌트를 제거함으로써 최대 1200개의 컴포넌트를 175~225ms에 렌더링할 수 있었습니다. 운영 환경에서 최대 1500개의 구성 요..

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법 create-react-app을 사용하고 있지만 사용하지 않는 것이 좋습니다.eject. @font-face를 통해 Import되어 로컬로 로드된 글꼴의 위치가 불분명합니다. 즉, 로드하고 있습니다. @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 좋은 의견이라도 있나? --편집 댄이 대답에서 언급한 요지를 포함해서요 ➜ Client git:(feature/trivia-game-ui-..

React.js의 div와 함께 onClick을 사용하는 방법 네모난 칸을 클릭하면 흰색에서 검은색으로 바꿀 수 있는 아주 간단한 어플을 만들고 있습니다.하지만 저는 곤란합니다.사용자가 정사각형을 클릭하여 색을 변경할 수 있도록 onClick 기능을 사용하고 싶은데 작동하지 않는 것 같습니다.span과 빈 p 태그를 사용해 봤지만 그것도 효과가 없습니다. 문제의 코드는 다음과 같습니다. var Box = React.createClass({ getInitialState: function() { return { color: 'white' }; }, changeColor: function() { var newColor = this.state.color == 'white' ? 'black' : 'white'; ..

"경고: 반응 모드:App 요소가 정의되지 않았습니다.'모달'을 사용하세요.setAppElement(el) 또는 set 'appElement={el}'을 클릭합니다. React-modal 패키지를 사용하여 React 앱 콘솔에서 이 경고를 수정하려면 어떻게 해야 합니까? 리액트 모드:앱입니다.★★★★★★를 사용해 .Modal.setAppElement(el) 「」를 설정합니다.appElement={el} 는 아직 하지 못했다.el원래 그래야만 해 컨텍스트: App.js 루트 컴포넌트 파일: ... import Modal from 'react-modal'; ... class App extends Component { ... render(){ ... ... } } 서 ★★★★★...코드가 표시되지 않음을 나타..

React Context API - 페이지 새로 고침 시 데이터 유지 컨텍스트 프로바이더가 초기 데이터 속성 값과 함께 설정되어 있다고 가정합니다. 예를 들어 소비자가 이러한 속성을 수정했다고 가정해 보겠습니다. 페이지 새로고침 시 이러한 변경은 손실됩니다.데이터 수정을 유지할 수 있도록 데이터를 유지하는 가장 좋은 방법은 무엇입니까?단순한 로컬 스토리지 이외에 다른 방법이 있습니까?네, 새로고침 후에도 데이터를 유지하려면 API 호출을 통해 서버 측 또는 브라우저 스토리지(로컬 스토리지, 세션 스토리지, 쿠키)에 해당 정보를 저장합니다.사용하는 옵션은 원하는 지속성 수준에 따라 달라집니다.스토리지 선택에 관계없이 다음과 같은 특징이 있을 수 있습니다. const MyContext = React.crea..