下面的React代码有什么区别?

问题描述 投票:1回答:2

第一:-

ReactDOM.render((
  <Provider store={store}>
    <App />
  </Provider>
),document.getElementById('root'));

第二个:-

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector(".container")
);

我想知道的是,做document.querySelector(".container")document.getElementById('root')的具体区别是什么?

javascript reactjs dom
2个回答
2
投票

document.getElementById('root')使用id root从HTML中获取DOM元素,而document.querySelector(".container")class container获取HTML中的第一个元素

根据MDN文档:

document.querySelector()

返回文档中与指定选择器或选择器组匹配的第一个Element,如果未找到匹配项,则返回null。

的document.getElementById()

通过其ID返回对元素的引用; ID是一个字符串,可用于唯一标识HTML id属性中的元素。

所以,

在第一种情况下,您的React App将使用id root在DOM元素中呈现,而在第二种情况下,它将使用类container在第一个DOM元素中呈现


1
投票

如果你的意思是在做document.querySelector(“。container”)和document.querySelector(“。root”)之间的区别,

然后

document.querySelector(".root") - >使用类“root”在所有元素中呈现您的反应代码

document.querySelector(".container") - >使用类“容器”在所有元素中呈现您的反应代码

如果你的意思是在文件中使用document.querySelector(“。container”)和document.getElementById('root')之间的区别。

然后

document.getElementById('root') - >在id为“root”的元素中呈现你的反应代码

document.querySelector(".container") - >使用类“容器”在所有元素中呈现您的反应代码

© www.soinside.com 2019 - 2024. All rights reserved.