react 指定dom上增加新dom

如果需要在指定的DOM节点上增加新的DOM元素，可以使用React中的Refs(引用)。

Refs是React提供的一个特殊API，用于获取组件实例或DOM元素的引用。通过Refs可以访问到DOM元素，然后对其进行操作。

以下是一个示例代码，展示如何在指定的DOM节点上增加一个新的DOM元素：

import React, { useRef } from 'react';

function App() {
  const divRef = useRef(null);

  const addElement = () => {
    const newElement = document.createElement('div');
    newElement.innerHTML = 'New Element';
    divRef.current.appendChild(newElement);
  };

  return (
    <div>
      <h1>Hello, world!</h1>
      <div ref={divRef}>Existing Element</div>
      <button onClick={addElement}>Add Element</button>
    </div>
  );
}

export default App;

在上面的代码中，通过useRef函数定义了一个变量divRef，用于存储指定的DOM节点。在addElement函数中，创建一个新的div元素，并设置其innerHTML属性为“New Element”，然后通过divRef.current.appendChild(newElement)将其追加到指定的DOM节点上。

在render函数中，使用JSX语法将div元素追加到页面上。当点击“Add Element”按钮时，调用addElement函数，实现在指定的DOM节点上增加新的DOM元素的功能。

需要注意的是，在使用Refs时，需要在渲染组件时将其挂载到相应的DOM元素上，即在需要引用的DOM元素上添加ref属性，将Refs作为其值传递。在上面的示例代码中，div元素通过ref={divRef}指定了Refs。