React 学习解疑

最新推荐文章于 2025-05-12 14:57:47 发布

thenewdiana

最新推荐文章于 2025-05-12 14:57:47 发布

阅读量379

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/thenewdiana/article/details/70636366

版权

react 专栏收录该内容

1 篇文章

订阅专栏

1.React 代码如下：

  <body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>

输出如下：

Hello, Alice!
Hello, Emily!
Hello, Kate!

虽然有正常输出，但是控制台出现如下警告信息：

这个警告是因为react对dom做遍历的时候，会根据data-reactid生成虚拟dom树，如果未手动添加unique constant key，react是无法记录dom操作的。它只会在重新渲染的时候，继续使用相应dom数组的序数号(就是array[index]这种)来比对dom树。所以手动添加key如下：

ReactDOM.render(
        <div>
        {
          names.map(function (name,i) {       
            return <div key={i}>Hello, {name}!</div> //添加key属性
          })
        }
        </div>,
        document.getElementById('example')
      );