적절한 React-ful 방법은 선택된 하위 구성 요소에서만 작동하는 상위 구성 요소의 함수를 처리하는 방법입니까?

Question

그래서 어느 정도 단순화하기 위해 두 개의 React 구성 요소가 있습니다. 하나는 다른 하나의 구성 요소입니다. 그들이 ItemTable 및 ItemRow라고합니다. ItemTable에는 많은 ItemRow가 있습니다. ItemTable은 호출되고 항목 배열을받습니다. 이 배열의 각 항목에 대해 ItemTable 내에 ItemRow가 만들어집니다. 특정 ItemRows를 선택하고 각 항목을 하나의 항목에 묶어서 ItemTable 수준에서 각 선택한 항목에 대해 하나의 특정 작업을 수행 할 수있게하려고합니다. 선택을 위해 각 행에 체크 박스가 있고 ItemTable의 버튼을 사용하여 선택한 각 항목에 대해 작업을 수행하기 시작합니다. 이 일을 생각할 수있는 두 가지 방법이 있습니다. 그리고 어떤 것이 반응에서 그것을하는 '적절한'방법인지는 확실하지 않습니다.

옵션 1 : 빈 테이블 배열을 ItemTable 상태에서 초기화하십시오. ItemRow의 체크 박스가 체크 될 때마다 ItemTable 배열에 추가하거나 제거하는 부모 ItemTable 상태에서 전달 된 핸들 함수를 호출합니다. 즉, 작업 할 항목 목록이 ItemTable 수준에서 추적되고 작업을 처리 할 단추를 클릭하면 배열을 구문 분석하고 각 항목에 대해 작업을 수행합니다.

옵션 2 : 생성시 LicenseRow 레벨에서 변수를 false로 초기화하십시오. 이 옵션을 선택하면 LicenseRow의 상태가 true로 변경됩니다. 선택을 취소하면 false입니다. LicenseTable 수준의 버튼을 선택하면 각 하위 항목으로 이동하고 true (선택됨)로 표시된 경우 해당 항목을 처리합니다.

저는 앞으로 더 좋은 방법이라고 생각합니다. 나는 React가 하향식 데이터 흐름이라는 것을 알고 있으므로 옵션 2로 기울어 져 있지만 부모 목록을 관리하는 것이 부모의 일이어야한다고 생각합니다. 어떤 방법이 반드시 '잘못'인지 확실하지 않지만, 귀하의 의견으로는이 항목을 처리하는 더 좋은 방법은 무엇입니까?

Answer 1

두 가지 전략 모두 유효하며 여기에 맞거나 잘못된 대답은 없습니다. 내 경험상, 옵션 1이 더 일반적인 접근 방법입니다.

은 2뿐만 아니라 옵션을 통해 다른 몇 가지 장점이 있습니다

이

• 은 일반적으로 내가 발견을 쉽게 (난 당신이 아이 아무것도 액세스 할 ref를 사용해야 할 생각까지하고 디버그 설정).
• 큰 컬렉션에서는 처리하기 전에 어떤 항목을 선택했는지 이미 알고 있기 때문에 성능이 향상됩니다. 옵션 2은 실제로 하나의 항목 만 선택 되어도 전체 모음을 열거해야합니다.
• 부모가 자신의 상태를 가짐으로써 더 쉽게 할 수 있습니다. 예를 들어 처리를 위해 항목을 선택하지 않은 경우 버튼을 비활성화 할 수 있습니다. 나는 반응을 알고

는 하향식 (top-down) 데이터 흐름이며, 그래서 난 내 의견 데이터가 여전히 옵션 1에서 아래로 흐르는에서

옵션 2쪽으로 기울고 있어요. 부모는 콜백이 실행될 때 변경할 데이터를 결정하고 을 아래로 전달합니다.

결국 선택은 너의 것이며 행운을 빈다. :)