Material-table：是否可以默认打开detailsPanel？

Question

我正在尝试创建主 React Material-Table的子表。一切都正常工作，因为它应该工作，详细信息面板（子表）显示在按下切换图标时。

有什么方法可以显示它默认打开吗？我的意思是删除切换图标并显示detailPanel组件渲染的右侧？

这是我的 mat-table 的样子（我不想插入整个组件代码，因为它会太多代码，完整代码位于沙箱中）：

<MaterialTable
        icons={tableIcons}
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        onRowClick={(evt, selectedRow) =>
          setSelectedRow(selectedRow.tableData.id)
        }
        title="Remote Data Example"
        detailPanel={detailSubtable}
        options={{
          rowStyle: rowData => ({
            backgroundColor:
              selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
          })
        }}
      />

以及Codesandbox的链接

Answer 1

据了解，没有任何正确的方法或道具可以实现此目的，但您可以进行本机 DoM 操作。
在 icon 中提供自定义 IconDetailPanel和一些唯一的 ID，如下所示：

  DetailPanel: forwardRef((props, ref) => (
    <div id="my-id" style={{ display: "none" }}>
      <ChevronRight {...props} ref={ref} />
    </div>
  )),

现在，componentDidMount找到这个元素并触发它的单击事件并隐藏父节点，如下所示

 useEffect(() => {
    const myToggler = document.getElementById("my-id");
    if (!!myToggler) {
      myToggler.click();
      myToggler.parentNode.style.display = "none";
    }
  }, []);

这是从您的链接中分叉出来的工作沙箱链接，如果我遗漏了什么，请告诉我。