magicmemo

this.refs를 사용한 권장 해제 경고 React 컴포넌트가 있는데 클릭하면 css 클래스를 전환합니다. 자, 여기 있습니다. export class myComponent extends React.Component { constructor() { super(); this.state = { clicked: false }; this.handleClick = this.handleClick.bind(this); } render() { return ( ); } handleClick() { this.refs.btn.classList.toggle('active'); } componentDidMount() { this.refs.btn.addEventListener('click', this.handleClick); ..

모든 MUI 컴포넌트에 대해 박스 섀도를 글로벌하게 디세블로 하려면 어떻게 해야 합니까? 기본값을 비활성화해야 합니다.box-shadow대부분의 MUI 컴포넌트에 사용됩니다.지금은 각 컴포넌트의 스타일을 다음과 같이 수동으로 설정하고 있습니다. 테마 설정을 사용하여 글로벌하게 이 작업을 수행할 수 있는 방법이 있습니까?다음과 같이 컴포넌트별로 실행할 수 있습니다. material-ui 테마의 설정 객체에서는shadows당신의 코드로 덮어쓰고 그냥 놔둬요none값, 나머지를 모두 제거합니다. 코드는 다음과 같습니다. const theme = createMuiTheme({ shadows: ["none"] }); 모든 섀도 박스가 어플리케이션에서 완전히 삭제됩니다. P/s: 이 구성은 버전용입니다.1.0.0-..

코드 분할로 인해 SPA 신규 도입 후 청크가 로드되지 않음 각 경로에서 코드 분할하는 단일 페이지 앱이 있습니다.새로운 버전의 앱을 전개할 때, 유저가 아직 페이지를 열고, 이전에 방문하지 않았던 루트를 방문하면, 유저는 통상 에러를 받습니다. 이 문제가 발생할 수 있는 또 다른 시나리오는 앱에 서비스 워커가 활성화되어 있는 경우입니다.신규 전개 후 사용자가 페이지를 방문하면 서비스 워커는 캐시에서 서비스를 받습니다.사용자가 자신의 캐시에 없는 페이지를 방문하려고 하면 청크 로딩에 실패합니다. 현재 이를 피하기 위해 앱에서 코드 분할을 비활성화했는데, 이 문제를 해결하는 가장 좋은 방법이 무엇인지 매우 궁금했습니다.사용자가 초기 페이지를 로드한 후 다른 모든 루트를 프리로드하는 것을 검토했습니다.이것에..

리액트 컴포넌트 동적 렌더링 React JSX에서는 다음과 같은 작업을 수행할 수 없습니다. render: function() { return ( {this.props.component.value} ); } 해석 오류 발생:예기치 않은 토큰 {.리액트가 감당할 수 없는 일인가요? 이 컴포넌트를 디자인하고 있습니다.후드 아래에 저장되어 있는 값이this.props.component.slug에는 유효한 HTML 요소(h1, p 등)가 포함됩니다.이 일을 잘 할 수 있는 방법이 있을까요?컴포넌트 슬래그는 컬리 브레이스 안에 넣지 마십시오. var Hello = React.createClass({ render: function() { return {this.props.component.value} ; } });..

어레이의 필드 값으로 쿼리할 Firestore 개체 배열 내에 값이 포함된 문서를 검색하는 단순 쿼리를 실행하려고 합니다. 예를 들어 데이터베이스 구조를 확인합니다. 다음과 같은 쿼리를 실행합니다. db.collection('identites').where("partyMembers", "array-contains", {name: "John Travolta"}) 올바른 방법은 무엇입니까? Firestore를 통해서도 가능합니까? 감사해요.Frank가 답변에서 설명한 바와 같이 어레이에 저장된 객체의 특정 속성을 쿼리하는 것은 어레이에 포함되어 있지 않습니다. 단, 가능한 회피책이 있습니다.실제로 다음과 같이 오브젝트 전체를 쿼리할 수 있습니다. db.collection('identites') .where(..

디스플레이 시뮬레이션: React Native 인라인 React Native는 CSS를 지원하지 않습니다.display디폴트로는 모든 요소가 다음 동작을 사용합니다.display: flex(없음)inline-flex둘 중 하나).대부분의 비플렉스 레이아웃은 플렉스 속성을 사용하여 시뮬레이션할 수 있지만 인라인 텍스트로 인해 당황스럽습니다. 내 앱에는 텍스트로 된 여러 단어가 들어 있는 컨테이너가 있으며, 그 중 일부는 포맷이 필요합니다.즉, 포맷을 수행하려면 스팬을 사용해야 합니다.스팬을 포장하기 위해 사용할 용기를 설정할 수 있습니다.flex-wrap: wrap단, 단어 구분 시 래핑하는 기존의 인라인 동작이 아닌 스팬 끝에서만 래핑할 수 있습니다. 문제가 표시됨(노란색으로 표시됨): (http://c..