reactjs : nth-child의 대안 (jsx가 제대로 "자식이 정의되지 않았습니다")

Question

gulp를 사용하여 JSX를 빌드하고 있습니다.

this.setState({exceptionsEdit: manual_exceptions}, function(){ 
    this.state.exceptionsEdit.forEach(function (exp, index){ 
     $('#exception-list-edit').nth-child(index).find('.ui-slider').slider("values", 0, Date.parse(this.state.exceptionsEdit[index].start)/1000) 
     $('#exception-list-edit').nth-child(index).find('.ui-slider').slider("values", 1 , Date.parse(this.state.exceptionsEdit[index].end)/1000) 
    }) 
}) 

내가 exceptionsEdit의 상태를 설정 한 후 일부 jQuery를 실행하고 있습니다 :

은 지금부터 내가 가진 어떤 jQuery를 사용하는 코드를 반응한다. 하지만 내 페이지를로드 할 때 다음과 같은 오류가 나타납니다.

Uncaught ReferenceError: child is not defined 
     $('#exception-list-edit').nth - child(index).find('.ui-slider').slider("values", 0, Date.parse(this.state.exceptionsEdit[index].start)/1000); 

어떻게해야합니까? n 번째 아이를 사용하지 않아야합니까? jsx/친화적 인 대안이 있습니까?

Answer 1

nth-child는 - 들어 있으므로 간단한 변수 이름이 아닙니다, 그래서 대신 ['nth-child']를 사용 .로 참조 할 수 없습니다. BTW 나는 그것이 선택기가 이후

$('#exception-list-edit:nth-child('+index+')').find... 

처럼 사용, 또는 당신은 반응과 jQuery를 사용하지 않아야 템플릿

$(`#exception-list-edit:nth-child(${index})`).find...