在 React.StrictMode 下无法使用

[tint]

semi-ui version

• 2.0.2

报错信息

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Typography which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at span
at Typography (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:914:566)
at Tooltip2 (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:969:710)
at LocaleConsumer (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1229:20)
at Base (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1236:1067)
at Text (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1237:10)
at span
at span
at span
at BreadcrumbItem (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1294:101)
at nav
at Breadcrumb (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1295:112)
at main
at Basic (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1552:847)
at Adapter (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1552:638)
at section
at Layout (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1552:1755)
at section
at Layout (http://localhost:4000/node_modules/.vite/@douyinfe_semi-ui.js?v=b1a1a510:1552:1755)
at App
overrideMethod @ VM709 react_devtools_backend.js:2540

Steps to reproduce 复现步骤

• 收起侧边栏后再展开侧边栏

Reproducible code 复现代码

function App() {
  const { Header, Footer, Sider, Content } = Layout;
  return (
    <Layout>
      <Sider style={{ backgroundColor: "var(--semi-color-bg-1)" }}>
        <Nav
          defaultSelectedKeys={["Home"]}
          style={{ maxWidth: 220, height: "100%" }}
          items={[
            { itemKey: "Home", text: "首页", icon: <IconHome size="large" /> },
            {
              itemKey: "Histogram",
              text: "基础数据",
              icon: <IconHistogram size="large" />,
            },
            {
              itemKey: "Live",
              text: "测试功能",
              icon: <IconLive size="large" />,
            },
            {
              itemKey: "Setting",
              text: "设置",
              icon: <IconSetting size="large" />,
            },
          ]}
          header={{
            logo: (
              <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />
            ),
            text: "直播运营后台",
          }}
          footer={{
            collapseButton: true,
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ backgroundColor: "var(--semi-color-bg-1)" }}>
          <Nav
            mode="horizontal"
            footer={
              <>
                <Button
                  theme="borderless"
                  icon={<IconBell size="large" />}
                  style={{
                    color: "var(--semi-color-text-2)",
                    marginRight: "12px",
                  }}
                />
                <Button
                  theme="borderless"
                  icon={<IconHelpCircle size="large" />}
                  style={{
                    color: "var(--semi-color-text-2)",
                    marginRight: "12px",
                  }}
                />
                <Avatar color="orange" size="small">
                  YJ
                </Avatar>
              </>
            }
          ></Nav>
        </Header>
        <Content
          style={{
            padding: "24px",
            backgroundColor: "var(--semi-color-bg-0)",
          }}
        >
          <Breadcrumb
            style={{
              marginBottom: "24px",
            }}
            routes={[
              "首页",
              "当这个页面标题很长时需要省略",
              "上一页",
              "详情页",
            ]}
          />
          <div
            style={{
              borderRadius: "10px",
              border: "1px solid var(--semi-color-border)",
              height: "376px",
              padding: "32px",
            }}
          >
            <Skeleton
              placeholder={<Skeleton.Paragraph rows={2} />}
              loading={true}
            >
              <p>Hi, Bytedance dance dance.</p>
              <p>Hi, Bytedance dance dance.</p>
            </Skeleton>
          </div>
        </Content>
        <Footer
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px",
            color: "var(--semi-color-text-2)",
            backgroundColor: "rgba(var(--semi-grey-0), 1)",
          }}
        >
          <span
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <IconBytedanceLogo size="large" style={{ marginRight: "8px" }} />
            <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
          </span>
          <span>
            <span style={{ marginRight: "24px" }}>平台客服</span>
            <span>反馈建议</span>
          </span>
        </Footer>
      </Layout>
    </Layout>
  );
}

[xieyezi]

@tint
貌似不是semi的问题？看一下react的版本以及ts的配置

"react": "^17.0.2",
"@douyinfe/semi-ui": "^2.0.1",
"typescript": "^4.3.2",
"vite": "^2.6.4",

以上版本搭配，没有出现你叙述的情况。
项目参考：
https://github.com/xieyezi/semi-design-pro

[tint]

[pointhalo]

这个问题是因为组件内部会使用到React.findDOMNode，这个API目前在Tooltip、Popover等场景下暂时无法取代。例如

Case-A：
<Tootip>
   <Component />
</Tooltip>

Case-B：
<Tootip>
   <div>test</div>
</Tooltip>

Tooltip必须通过findDOMNode来获取Component的实际DOM元素，然后调用getBoudingRect等API去获取实际位置，从而
计算出浮层的位置。
例如：

semi-design/packages/semi-ui/tooltip/index.tsx

Line 230 in 65d6d6d

// There is no guarantee that triggerE l.current can get the real dom, so call findDOMNode to ensure that you can get the real dom

该类场景通过ref无法完全取代的，所以还没有办法完全移除。
暂时不计划做处理。

[zoubingwu]

@pointhalo 可以参考下别的 UI 库，据我所知 blueprintjs 新版本就移除了 findDOMNode

[pointhalo]

好的，后续我们看下其他类似库的做法参考一下

[laozhu]

冒昧问这个还打算处理吗？我看 mui 在 React.Strict 下好像也没有这个 findDOMNode 报错啊

[pointhalo]

冒昧问这个还打算处理吗？我看 mui 在 React.Strict 下好像也没有这个 findDOMNode 报错啊

事实上，mui为了移除 findDOMNode ，在他们v4-> v5 的升级中，做了一个breaking change，对使用上做了限制，要求children必须实现ref的转发。

正如我上一次的回复，如果这个Component本身是一个自定义组件，但它没有做任何ref相关的绑定，在现有的Semi版本下，也是能正确地展示浮层相关的

Case-A：
<Tootip>
   <Component />
</Tooltip>

// 更具体的例子，比如
<Tooltip> 
   <Select  style={{ width: 500 }} />    // Select为一个普通的class组件，没有做ref相关的绑定或转发
</Tooltip> 

如果我们要移除 findDOMNode，在这种情况下，就必须要要求 Select需要forwardRef并且将其 ref 转发到 Trigger（也就是Select的点击触发器上 ）
所以，造成两个新的问题
1、对旧有写法不兼容（Semi 除了开源社区用户外，在我们公司内部也有大量的使用，每周数十万的下载量。在这些旧有用户中，存在大量使用了Tooltip包裹自定义组件的写法，我们需要更慎重地考虑他们的升级成本）
2、如果将ref转发到trigger上（可能是某个button 可能是某个div），一些我们挂载在ref上的实例方法也无法使用了。例如，select.open()、select.close()

因此，我们短期内不考虑跟进这个问题。可能会在后续合适的大版本完成这个warning的移除。

[laozhu]

@pointhalo谢谢您的解释，非常清楚，学习到了 👍

刚开始在新项目里用你们的 UI 框架，设计非常漂亮，比 mui， antd 和 tdesign 都要漂亮，希望 Semi Pro 也能早点出来，这样做 b 端产品可以又漂亮又有效率。