반응형

reactjs 37

속성별 배열 정렬

속성별 배열 정렬 어레이의 첫 번째 3개의 오브젝트를 가져와 매핑합니다. { champions.slice(0,3).map(function(champ){ return ( {champ.name} something ) }) } 각각champ가 있다levelattribute(챔프 레벨). 출력 정렬 방법champ.level descending처음 3개를 썰어줄까요?사용자 정의 비교 함수와 함께 사용하여 먼저 내림차순 정렬을 수행합니다. champions.sort(function(a, b) { return b.level - a.level }).slice(... ES6를 통한 더욱 뛰어난 기능: champions.sort((a, b) => b.level - a.level).slice(... 사용자 고유의 비교 함수..

programing 2023.03.14

react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법

react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법 reactjs 라우터에서 Link 컴포넌트를 사용하고 있는데 OnClikevent가 동작하지 않습니다.코드는 다음과 같습니다. Here 이렇게 하는 거야, 아니면 다른 거야?합격입니다hello()스트링으로서도hello()실행 수단hello지금 당장. 해라 onClick={hello} 다음을 사용해야 합니다. Here 또는 (방법인 경우)hello이 클래스에 배치됩니다. Here 업데이트: ES6 및 최신 버전의 경우 클릭 방식으로 일부 매개 변수를 바인딩하려면 다음을 사용할 수 있습니다. const someValue = 'some'; .... hello(someValue)}>Here 나는 이것이 일반적으로 사용하기에 좋은 패턴이라고 생..

programing 2023.03.09

material-ui에서 의사 선택기를 사용하는 방법

material-ui에서 의사 선택기를 사용하는 방법 나는 간단한 것을 성취하기 위해 노력해 왔다.나는 내 모습을 보여주거나 숨기려고 했다.유사 셀렉터가 있는 머티리얼 UI v1의 컴포넌트이지만, 어떤 이유로든 동작하지 않습니다.코드: CSS: root: { backgroundColor: 'white', '&:hover': { backgroundColor: '#99f', }, }, hoverEle: { visibility: 'hidden', '&:hover': { visibility: 'inherit', }, }, rootListItem: { backgroundColor: 'white', display: 'none', '&:hover': { display: 'block', backgroundColor: ..

programing 2023.03.09

react-module이 하위 구성 요소에서 이.module.location을 가져옵니다.

react-module이 하위 구성 요소에서 이.module.location을 가져옵니다. 제가 알기로는의지는 준다App같은 라우팅 관련 소품location그리고.params만약 나의App컴포넌트에는 다수의 중첩된 자 컴포넌트가 있습니다.자 컴포넌트가 다음 없이 이들 소품에 액세스하려면 어떻게 해야 합니까? 앱에서 소품 전달 창 개체 사용 중첩된 하위 구성요소에 대한 경로 생성 내 생각에는 말이지…this.context.router루트에 관한 정보가 몇 가지 있습니다만,this.context.router루트를 조작하는 기능은 몇 가지밖에 없는 것 같습니다.V6 컴포넌트에서 및 을 사용하여및 을 취득할 수 있습니다. const Child = () => { const location = useLocation..

programing 2023.03.09

소품을 통해 제공되는 이미지가 로드되었을 때 감지하고 반응에서 상태를 변경하는 방법은 무엇입니까?

소품을 통해 제공되는 이미지가 로드되었을 때 감지하고 반응에서 상태를 변경하는 방법은 무엇입니까? 최종 아바타 이미지를 로드하는 동안 다른 이미지(짝퉁 아바타)를 로드하고 싶습니다.이 아이디어는 프로펠러 이미지가 로드된 시점을 감지하고 상태를 변경하는 것입니다.가능합니까?어떤 아이디어?감사해요! class ImageUser extends React.Component { constructor(props) { super(props); this.state = {userImageLoaded: false}; let imageSrc = ""; if (!this.props.userImage) { imageSrc = this.props.noUserImage; } else { imageSrc = this.props.us..

programing 2023.03.09

어떻게 하면 다른 소품들을 넘겨서 반향을 일으킬 수 있을까요?

어떻게 하면 다른 소품들을 넘겨서 반향을 일으킬 수 있을까요? 예를 들어, 클래스 베이스의 컴포넌트가 필요로 하는 3개의 소품이 있습니다. {this.props.children} 내가 원래 기대하지 않았던 다른 소품들을 어떻게 물려줄 수 있을까? 하지만 내 컴포넌트를 사용하는 다른 누군가가 사용하길 원한다고 말할 수 있을까? 생각해 봤는데 {this.props.children} 그러나 프롭 복제가 우려된다.확산 구문 사용: const {propOne, propTwo, ...leftOver} = this.props; // `leftOver` contains everything except `propOne` and `propTwo` 예를 들면 다음과 같습니다. const { propOne, propTwo, ..

programing 2023.03.04

TypeScript를 사용한 react-router-

TypeScript를 사용한 react-router- 리액트 라우터를 TypeScript와 함께 사용하려고 합니다.다만, Router 기능을 사용할 때 문제가 있습니다.마지막 줄에 꽤 이상한 오류가 나타납니다. Argument of type 'ComponentClass' is not assignable to parameter of type 'StatelessComponent | ComponentClass'. Type 'ComponentClass' is not assignable to type 'ComponentClass'. Type '{}' is not assignable to type 'RouteComponentProps'. Property 'match' is missing in type '{}’ 코드..

programing 2023.03.04

상위 상태 변경 후 하위 구성 요소가 업데이트되지 않음

상위 상태 변경 후 하위 구성 요소가 업데이트되지 않음 다양한 자 컴포넌트에 데이터를 채울 수 있는 멋진 ApiWrapper 컴포넌트를 만들려고 합니다.제가 읽은 바로는 이 방법이 효과가 있을 것 같습니다.https://jsfiddle.net/vinniejames/m1mesp6z/1/ class ApiWrapper extends React.Component { constructor(props) { super(props); this.state = { response: { "title": 'nothing fetched yet' } }; } componentDidMount() { this._makeApiCall(this.props.endpoint); } _makeApiCall(endpoint) { fetch(..

programing 2023.03.04
반응형