如何获得React组件的outerHTML

Question

我有一个React组件，我想让它的outerHTML把它传递到文本框上。

下面是获取outerHTML的代码：

var preview = document.getElementById("button-preview").outerHTML;
console.log(preview);

但是，它返回Uncaught TypeError: Cannot read property 'outerHTML' of null

当我试图将代码更改为

var preview = document.getElementById("root").outerHTML;
console.log(preview);

它不显示错误并返回根的outerHTML。怎么啦？

Answer 1

您可以使用refs-and-the-dom。

在componentDidMount上，您可以获得所需元素的引用，该元素的外部html是您想要的。

this.divEle.outerHTML //will give outerHtml.

在render中，将ref放在必需的元素上。

ref={(divEle)=>this.divEle=divEle}

示例:

class App extends React.Component{

     componentDidMount(){
       console.log(this.divEle.outerHTML);
     }

      render(){

        return (
          <div>
            <div style={styles}  ref={(divEle)=>this.divEle=divEle}>
              <Hello name="CodeSandbox" />
              <h2>Start editing to see some magic happen {'\u2728'}</h2>
            </div>
          </div>
        )
      }
    }

工作codesandbox