如何使用 React 从 DOM 中删除 HTML 元素

Question

我在 div 中设置了一个加载器，一旦通过 react 加载某个组件，我想删除它。 这个 div 存在于我的组件之外的 index.html 文件中。 我的 div 的代码是：

<div class="loaderBackground">
   <div class="loader"></div>
</div>

我尝试过使用 refs，但我发现的所有内容似乎都暗示该元素需要位于组件中，我想避免这种情况。

是否可以删除元素而不将其放入组件中，或者我必须在某个地方安装组件？

Answer 1

我强烈反对使用 document.querySelector() .. 而我会像第二个答案中所说的那样反应 refs 或 state 但我会使用条件渲染，因为它不会影响 styles 可能有不同的状态，具体取决于其他东西

  this.setState({ hide: true });


  <div class="loaderBackground">
       {!hide && <div class="loader"></div>}
  </div>

Answer 2

我建议添加一个state在加载后更改为true以控制 DOM 的显示。

例子：

this.setState({ hide: true });

<div class="loaderBackground">
       <div class="loader" style={{display: hide? "none":"block"}}></div>
    </div>

Answer 3

componentDidMount()应该是放置逻辑的好地方。

var element = document.querySelector('.loader');
element.parentNode.removeChild(element);

// or

element.style.display = 'none';