정상적으로 작동하는 정적 코드가 있었지만 map()동일한 결과를 동적으로 생성하기 위해 배열을 사용하려고 시도했을 때 더 이상 작동하지 않습니다.
배열을 매핑 할 때 구문 오류를 범했다고 생각합니다. 누군가 내 실수가 무엇인지 지적 할 수 있습니까?
다음은 잘 작동하는 이전 정적 코드입니다.
const GridContent = (props)=>{
return (
<div className={classes.Container}>
<ProgressBar percentage="100" styleName="ProgressBar1"></ProgressBar>
<ProgressBar percentage="24" styleName="ProgressBar2"></ProgressBar>
<ProgressBar percentage="48" styleName="ProgressBar3"></ProgressBar>
</div>
);
}
다음은 동적으로 만들려고 한 것입니다.
const fakeData3=[{percentageItem: '100'}, {percentageItem: '24'}, {percentageItem: '48'}, {percentageItem: '12'}, {percentageItem: '90'}, {percentageItem: '57'}, {percentageItem: '72'}, {percentageItem: '50'}, {percentageItem: '39'}]
const GridContent = (props)=>{
return (
<div className={classes.Container}>
{fakeData3.map((item, index)=>{
return <ProgressBar percentage={`"${item.percentageItem}"`} styleName={`"ProgressBar${index+1}"`}></ProgressBar>
})}
</div>
);
}
코드의 마지막 부분을 반환 할 때 구문 오류가 있다고 생각합니다.
나는 당신이 여기에서 당신의 인용문을 지나치게 복잡하게 만들었다 고 생각합니다-
<ProgressBar percentage={`"${item.percentageItem}"`} styleName={`"ProgressBar${index+1}"`}></ProgressBar>
시도-
<ProgressBar percentage={item.percentageItem} styleName={`ProgressBar${index+1}`}></ProgressBar>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다