ant-design / ant-design/pro-components
🧐[问题]在客户端，WaterMark不支持renderToString或者renderToStaticMarkup
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🧐 问题描述
我想用renderToString或者renderToStaticMarkup，把WaterMark渲染成html字符串，然后再跟其他的html字符串做拼接，最后一起赋值给dangerouslySetInnerHTML，结果生成的html不显示水印，并且也没有生成水印图片
### 💻 示例代码
App.tsx
```
import { WaterMark } from "@ant-design/pro-components";
import { renderToString, renderToStaticMarkup } from "react-dom/server";
export default () => {
return (
),
}}
/>
);
};
```
App2.tsx
```
import { WaterMark } from "@ant-design/pro-components";
import { renderToString, renderToStaticMarkup } from "react-dom/server";
export default () => {
return (
);
};
```
index.tsx
```
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
//import App from "./App2";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render();
```
[https://codesandbox.io/p/sandbox/solitary-wind-vlgqm7](https://codesandbox.io/p/sandbox/solitary-wind-vlgqm7)
### 🚑 其他信息
从截图中可以看到，ant-pro-layout-watermark这个div中没有内容
如果改为调用App2，则能够显示水印
Contributor guide
Research direction
Start with the WaterMark behavior shown in App.tsx and compare it with the working client-rendered example in App2.tsx. Run the linked CodeSandbox and inspect how renderToString and renderToStaticMarkup handle the component. Done means the server-rendered WaterMark produces visible content when inserted through dangerouslySetInnerHTML, or the limitation is clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100