Reactjs RHTML似乎不对吗？

演示url:

为什么外部TML总是abc

顺便问一下，为什么控制台似乎会记录所有内容两次

现在console.log的内容是：

render h1: {current: null} undefined
render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>abc</h1>

但我认为正确的内容是：

render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>hello3</h1>

希望有人能帮助我！非常感谢

从React导入React； 类Hello扩展了React.Component{ 构造器{ 超级作物； this.h1=React.createRef； 此.state={ 姓名：abc }; } 组件安装{ this.setStatestate，props=>{ console.logfirst、state.name、this.h1.outerHTML； 返回{ 姓名：hello1 }; }; console.logsecond、this.state.name、this.h1.outerHTML； this.setStatestate，props=>{ console.logthird，state.name，this.h1.outerHTML； 返回{ 姓名：hello2 }; }; console.logforth、this.state.name、this.h1.outerHTML； this.setStatestate，props=>{ console.logfifth，state.name，this.h1.outerHTML； 返回{ 姓名：hello3 }; }; } 渲染{ console.logrender h1:，this.h1，this.h1.outerHTML； 返回this.h1=ref}>{this.state.name}； } }

---

导出默认Hello 您的Hello组件有一个H1，您使用该Hello组件的位置也有另一个H1

参考：

---

很高兴您使用了http/:codesandbox.io。但是你仍然需要在这里添加你的大部分代码。我已经删除了App.js中额外的h1元素。但是问题仍然存在。@threetree您可以更新您的问题以包含指向@threetree的链接吗？@threetree完整URL和codesandbox.io请不要使用.app urlOK、@threetree。这是故意的反应。我已经更新了答案。希望这能帮你解决问题。

    <div className="App">
      <Hello />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);