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

它没有显示错误并返回root的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

如何获得React组件的outerHTML

1 个答案: