Javascript 将REACT组件呈现为要复制或添加到textarea的HTML字符串

我试图从组件中获取HTML作为标记字符串，以便将其附加到textarea。下面的第一个按钮的破解是有效的，但我认为这不是解决这个问题的正确方法，我不喜欢在我的页面中有一个随机隐藏的div

.renderToStaticMarkup似乎是一个完美的工具，但它直接带来了一个错误：

未捕获的TypeError:无法访问属性“blockList”，对象（…）（…）为空

blocklist来自一个存储，可能是这样的。不能使用useContext钩子对组件调用renderToStaticMarkup吗

import React, { useState, useEffect } from "react";
import ReactDOMServer from "react-dom";
import { Icon, BlockCompilerToHTML } from "components/lib";
import Style from "./themeConfigCard.module.scss";
import { MyButton } from "components/myButton/myButton";

export function ThemeConfigCard(props) {
  let htmlString = "";

  useEffect(() => {
    //htmlString = ReactDOMServer.renderToStaticMarkup(<BlockCompilerToHTML />);
    //Above commented because it trows error.
  }, []);

  return (
    <div className={Style.themeConfigCard}>
      <MyButton
        onClick={() => {
          console.log(document.getElementById("rendered_html").innerHTML);
          document.getElementById("mytextarea").value =
            document.getElementById("rendered_html").innerHTML;
        }}
      >
        Get HTML as string with hack
      </MyButton>
      <MyButton
        onClick={() => {
          document.getElementById("mytextarea").value = htmlString;
        }}
      >
        Get HTML as string using renderToStaticMarkup
      </MyButton>

      <textarea id="mytextarea"></textarea>

      <div style={{ display: "none" }} id="rendered_html">
        <BlockCompilerToHTML />
      </div>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“react dom”导入ReactDOMServer；
从“组件/lib”导入{Icon，BlockCompilerToHTML}；
从“/themeConfigCard.module.scss”导入样式；
从“components/MyButton/MyButton”导入{MyButton}；
导出功能ThemeConfigCard（道具）{
让htmlString=“”；
useffect（（）=>{
//htmlString=ReactDOMServer.renderToStaticMarkup（）；
//上面的注释是因为它出错了。
}, []);
返回(
{
log（document.getElementById（“呈现的html”）.innerHTML）；
document.getElementById（“mytextarea”）.value=
document.getElementById（“呈现的html”）.innerHTML；
}}
>
使用hack将HTML作为字符串获取
{
document.getElementById（“mytextarea”）.value=htmlString；
}}
>
使用renderToStaticMarkup获取HTML作为字符串
);
}

您好，请尝试以下解决方案及其工作原理

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server'

class App extends React.Component {
  state = {};
  render(){
    const {textarea} = this.state;
    return (
      <div>
        <textarea id="mytextarea"></textarea>
        <Test />
        <button onClick={this.handleClick} >Set textarea</button>
      </div>
    )
  }
  handleClick = ()=>{
    const value = renderToStaticMarkup(<Test />);
    document.getElementById("mytextarea").value = value;
  }
}
const Test = ()=>{
  return (
    <div>Hello</div>
  )
}


export default App;

从“React”导入React；
从“react dom/server”导入{renderToStaticMarkup}
类应用程序扩展了React.Component{
状态={}；
render（）{
const{textarea}=this.state；
返回(
设置文本区域
)
}
handleClick=（）=>{
常量值=renderToStaticMarkup（）；
document.getElementById（“mytextarea”）.value=value；
}
}
常数测试=（）=>{
返回(
你好
)
}
导出默认应用程序；

尝试使用setState存储htmlString。也许它应该起作用？@Zeeshan似乎无法解决我的问题。我认为它在