ReactJS プログラミングによる MUI DataGrid のすべてのノードの展開と折りたたみ

Question

<p>MUI ReactJS の <code>DataGrid</code> でプログラムによってすべての行を展開/縮小するにはどうすればよいですか? </p> <p><strong>何を試しましたか? </strong> MUI ドキュメントに従って、<code>defaultGroupingExpansionDepth</code> プロパティを使用しました。 <pre class="brush:php;toolbar:false;">エクスポート const EXPAND_ALL = -1; エクスポート const COLLAPSE_ALL = 0; ... const [expandedState, setExpandedState] = useState(COLLAPSE_ALL); ... <スタック> を返す <スタック間隔={2} 方向="行" m={1}> <ボタン バリアント={"含まれている"} onClick={() => setExpandedState(EXPAND_ALL)}>すべて展開</ボタン> <ボタン バリアント={"含まれている"} onClick={() => setExpandedState(COLLAPSE_ALL)}>すべて折りたたむ</ボタン> </スタック> <データグリッドプロ ツリーデータ ... apiRef={dataGridApi} defaultGroupingExpansionDepth={expandedState} ... /> </スタック>;</pre> <p>問題は、これらのボタンはツリーが部分的に展開されていない場合にのみ機能することです。</strong> </p> <p>ツリー グリッドを部分的に展開すると、ボタンが機能しなくなります。ツリー グリッドの現在の展開/折りたたみ状態に関係なく、これらのボタンを機能させるにはどうすればよいですか? </p>

Answer 1

defaultGroupingExpansionDepth プロパティを使用して DataGrid の初期展開状態を制御しているようですが、行を展開または折りたたむときに動的に更新されない可能性があります。現在の展開/折りたたみ状態でボタンを機能させるには、controlled state メソッドを使用して展開状態を管理します。 リーリー