在 React.StrictMode 下无法使用 #201

tint · 2021-11-04T17:38:03Z

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>
  );
}

The text was updated successfully, but these errors were encountered:

xieyezi · 2021-11-05T01:27:13Z

@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 · 2021-11-05T02:44:03Z

pointhalo · 2021-11-05T03:09:56Z

这个问题是因为组件内部会使用到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 · 2021-11-14T11:05:51Z

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

pointhalo · 2021-11-25T10:27:08Z

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

laozhu · 2022-02-12T16:28:52Z

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

pointhalo · 2022-02-14T02:44:26Z

冒昧问这个还打算处理吗？我看 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 · 2022-02-14T02:51:06Z

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

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

baranwang · 2024-07-09T02:26:36Z

React 19 彻底移除了 findDOMNode API，这个问题是不是有必要重启了

pointhalo · 2024-07-09T08:50:48Z

React 19 彻底移除了 findDOMNode API，这个问题是不是有必要重启了

会在最终做 v19的兼容适配时处理，但不是现在。还有比较长的时间窗口。19目前还处于rc阶段，我们内部基本不会有人用于正式项目中。breaking change式的更新对现阶段的旧有用户来说是无谓的损耗。

ilxqx · 2024-07-29T09:52:29Z

期待这个问题的解决：
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Button2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

我个人是个完美强迫症，所以还是很期待官方的解决的😂

ilxqx · 2024-07-29T09:54:25Z

关掉 StrictMode 依旧报警告信息，只不过警告信息没有那么多了。
React18 版本

ilxqx · 2024-07-29T12:43:20Z

@pointhalo 想请教大佬一个你们可能觉得弱智的问题，为什么你们都这么热爱 React 而不是 Vue 呢？是因为开发习惯、生态、还是别的什么原因呢？😂 React 到底有什么大魔法呢？

tint added the bug Something isn't working label Nov 4, 2021

pointhalo added the wontfix This will not be worked on label Nov 5, 2021

pointhalo closed this as completed Nov 12, 2021

Xwudao mentioned this issue Dec 1, 2021

findDOMNode is deprecated in StrictMode. #340

Closed

pointhalo mentioned this issue Dec 6, 2022

[Global] 兼容 React 严格模式 #1305

Open

pointhalo mentioned this issue Jan 3, 2024

[BUG] Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Button2 which is inside StrictMode. #2006

Closed

1 task

pointhalo mentioned this issue Apr 23, 2024

[BUG] Breadcrumb组件会提示Warning: findDOMNode is deprecated in StrictMode警告 #2198

Closed

1 task

pointhalo removed the wontfix This will not be worked on label Jul 11, 2024

pointhalo mentioned this issue Aug 29, 2024

[BUG] <title>findDOMNode is no longer support #2453

Closed

1 task

This was referenced Nov 1, 2024

[BUG] findDOMNode is deprecated and will be removed in the next major release. #2552

Closed

[BUG] next15 不支持semi-design #2545

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

在 React.StrictMode 下无法使用 #201

在 React.StrictMode 下无法使用 #201

tint commented Nov 4, 2021

xieyezi commented Nov 5, 2021

tint commented Nov 5, 2021

pointhalo commented Nov 5, 2021 •

edited

Loading

zoubingwu commented Nov 14, 2021

pointhalo commented Nov 25, 2021

laozhu commented Feb 12, 2022 •

edited

Loading

pointhalo commented Feb 14, 2022 •

edited

Loading

laozhu commented Feb 14, 2022

baranwang commented Jul 9, 2024

pointhalo commented Jul 9, 2024

ilxqx commented Jul 29, 2024

ilxqx commented Jul 29, 2024

ilxqx commented Jul 29, 2024

在 React.StrictMode 下无法使用 #201

在 React.StrictMode 下无法使用 #201

Comments

tint commented Nov 4, 2021

semi-ui version

报错信息

Steps to reproduce 复现步骤

Reproducible code 复现代码

xieyezi commented Nov 5, 2021

tint commented Nov 5, 2021

pointhalo commented Nov 5, 2021 • edited Loading

zoubingwu commented Nov 14, 2021

pointhalo commented Nov 25, 2021

laozhu commented Feb 12, 2022 • edited Loading

pointhalo commented Feb 14, 2022 • edited Loading

laozhu commented Feb 14, 2022

baranwang commented Jul 9, 2024

pointhalo commented Jul 9, 2024

ilxqx commented Jul 29, 2024

ilxqx commented Jul 29, 2024

ilxqx commented Jul 29, 2024

pointhalo commented Nov 5, 2021 •

edited

Loading

laozhu commented Feb 12, 2022 •

edited

Loading

pointhalo commented Feb 14, 2022 •

edited

Loading