Question

我有几个反应组件，我想从中获取一个组件作为html字符串发送到服务器。假设我要发送的组件是<ReportComponent /> 如何做到的。我尝试过

onRouteChanged = () => { console.log(<ReportComponent />); };

但这不会给我HTML格式。

场景是这样

单击发送按钮后，客户端计算机上当前正在查看的组件应发送到服务器以另存为报告。

Answer 1

您可以使用普通的document.querySelector和innerHTML属性。

在ReportComponent中添加一个包装div来呈现方法并为其指定ID：

<div id="reportComponent">...important stuff that gets rendered...</div>

在ReportComponent已经呈现并且在DOM中之后，您可以

const reportComponentHTML = document.querySelector("#reportComponent").innerHTML;
//send it to server or log it to console
console.log(reportComponentHTML)

Answer 2

尝试使用renderToString()方法

您需要使用import {renderToString} from react-dom/server

然后像这样记录组件

renderToString(<MyAwesomeComponent/>)

确保您通过了必需的道具。

Answer 3

假设您的问题是获取渲染元素的完整HTML。您必须设法在组件上分配ID attribute或在组件上使用refs attribute，并在调用onRouteChanged时使用getElementById或在react中使用引用来获取组件。

对于裁判的例子，你可以参考 How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

注意：refs在以后的版本中可能会贬值

获取渲染的React组件以发送回服务器

3 个答案: