React第一天

最新推荐文章于 2024-05-21 14:31:03 发布

qq_39073792

最新推荐文章于 2024-05-21 14:31:03 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_39073792/article/details/84349060

本文探讨了在React中使用document.getElementsByClassName()的常见错误，解释了如何正确地从DOM中选择元素，并介绍了React元素的不可变性。通过示例展示了如何使用setInterval结合ReactDOM.render()来定时更新界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一坑

关于document.getElementsByClassName()的使用

今天我试用React元素渲染到根DOM节点上，结果一直class一直显示不出来，后来发现是忘记了getElementsByClassName()函数获取的是一个数组

<div class="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementsByClassName('example')[0] //此处获取的是一个数组，所以要在getElementsByClassName('example')后面加上[0]
);
</script>

更新

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);