Antd에서 List 구성 요소 재사용
function Other() {
const [data, setData] = useState([6, 7, 8, 3, 4, 5])
function handleData() {
setData([6, 7, 8, 9])
}
function handleData1() {
setData([6,7,8])
}
return (
<>
}>
>
)
}
function ListData(props) {
const [check, setCheck] = useState(false)
console.log(check)
return setCheck(!check)}>{props.list}{check?" true":" false"}
}
export default Other여기서 List 구성 요소를 사용했습니다. 이것은 매우 자주 사용하는 구성 요소입니다.
그러나 우리가 버튼을 눌렀을 때 6, 7, 8 세 개의 구성 요소가 다시 렌더링되지 않은 것을 발견했다.
우리는 맵키의 유일한 문제를 쉽게 생각할 수 있다.그런데 저희가 이렇게 고치면...
}>
//or
}>
우리는 여전히 쓸모가 없다는 것을 발견할 것이다.어셈블리가 중복된 렌더링되지 않았는지 여부
우리가antd 문서를 볼 때, 이 해결 방안에 대한props도 없습니다.
그래서 저희가 원본을 보러 가야 돼요.
renderItem = (item: any, index: number) => {
const { renderItem, rowKey } = this.props;
let key;
if (typeof rowKey === 'function') {
key = rowKey(item);
} else if (typeof rowKey === 'string') {
key = item[rowKey];
} else {
key = item.key;
}
if (!key) {
key = `list-item-${index}`;
}
this.keys[index] = key;
return renderItem(item, index);
};
so, 이 코드를 보고 이름을 보면 rowKey라는 속성을 알 수 있습니다. 바로 우리가 사용해야 할 방법입니다.그래서 저희가 코드를 수정할 거예요.
uuid()} renderItem={(item,index)=>}>
이렇게 하면 구성 요소가 다시 렌더링되지 않는 문제를 해결할 수 있다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
04 / 20 / 2022HOC 관련질문 첫번째 예시에서 해당 부분이 제어권을 가진것이고, withSubscription이 고차컴포넌트가 되는게 맞는지? CommentListWithSubscription, BlogPostWithSubscri...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
