화살표 함수에서 변수를 정의하고 구성 요소를 반환하십시오.

Question

.map() 반복 변수 내에 변수를 정의하고 구성 요소를 반환하고 싶습니다.

그러나지도 내에서이 변수를 사용하면 오류가 발생합니다. 이것이 가능합니까? 그렇다면 어떻게해야합니까?

다음은 내가 할 노력하고있어의 간단한 예입니다

render() { 
    return(
    <div> 
     {array.map((element, index) => (
     let disturbingVariable = 100 + index 
     <MyComponent disturbingVariable={disturbingVariable} /> 
    ))} 
    </div> 
) 
} 

Answer 1

화살표 기능이있는 경우 더 하나 개의 문장보다 당신이 더 이상 암시 반환 구문을 사용할 수 없습니다.

추가 블록 중괄호와 return 문 : 또는

array.map((element, index) => { 
    let disturbingVariable = 100 + index 
    return <MyComponent disturbingVariable={disturbingVariable} /> 
}) 

, 암시 적 반환 유지, 변수 선언을 포기하고 현재 위치에서 추가를 수행 또는

array.map((element, index) => 
    <MyComponent disturbingVariable={100 + index} />) 

Answer 2

을, 당신은 생략 할 수있다 반환 및 중괄호를 차단하지만 함수 본문은 암시 적 반환과 함께 하나의 라이너 여야합니다.

render() { 
    return(
    <div> 
     {array.map((element, index) => <MyComponent disturbingVariable={100 + index}/>)} 
    </div> 
) 
} 

암시 적 리턴에 대한 자세한 정보 here

Answer 3

이는 return 문을 사용하여 명시 적으로 함수에서 값을 암시 적으로 반환하려고하기 때문입니다. 값을 반환하고 다른 연산을 수행하려면 다음과 같이해야합니다. -

Notice()는 {}로 변환하고 return 문을 사용하여 구성 요소를 명시 적으로 반환합니다.

render() { 
    return(
    <div> 
     {array.map((element, index) => { 
     let disturbingVariable = 100 + index 
     return <MyComponent disturbingVariable={disturbingVariable} /> 
     })} 
    </div> 
) 
}