ReactJS 프로그래밍을 통해 MUI DataGrid의 모든 노드 확장 및 축소

Question

<p>MUI ReactJS의 <code>DataGrid</code>에서 프로그래밍 방식으로 모든 행을 확장/축소하는 방법은 무엇입니까? </p> <p><strong>무엇을 시도해 보셨나요? </strong> MUI 문서에 따라 <code>defaultGroupingExpansionDepth</code> 속성을 사용했습니다. </p> <pre class="brush:php;toolbar:false;">export const EXPAND_ALL = -1; 수출 const COLLAPSE_ALL = 0; ... const [expandedState, setExpandedState] = useState(COLLAPSE_ALL); ... 반환 <스택> <스택 간격={2} 방향="행" m={1}> <Button 변형={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>모두 확장</Button> <Button 변형={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>모두 접기</Button> </스택> <DataGridPro 트리데이터 ... apiRef={dataGridApi} defaultGroupingExpansionDepth={expandedState} ... /> </Stack></pre> <p>문제는 이 버튼이 트리가 부분적으로 확장되지 않은 경우에만 작동한다는 것입니다. </p> <p>트리 그리드를 부분적으로 확장하면 버튼이 더 이상 작동하지 않습니다. 트리 그리드의 현재 확장/축소 상태에 관계없이 이러한 버튼이 작동하도록 하려면 어떻게 해야 합니까? </p>

Answer 1

defaultGroupingExpansionDepth 속성을 사용하여 DataGrid의 초기 확장 상태를 제어하는 ​​것처럼 보이지만 행을 확장하거나 축소할 때 동적으로 업데이트되지 않을 수 있습니다. 현재 확장/축소된 상태에서 버튼이 작동하도록 하려면 controlledstate 메소드를 사용하여 확장된 상태를 관리할 수 있습니다.

으아아아