javascript - 如何在反应中创建动态元素？

Question

我正在尝试在单击按钮时动态创建元素，并使用 ref 将其附加到其中一个类中。

我可以使用document.createElement，但从我读到的内容中不要在反应中使用它

例如，我想通过单击按钮<p>向 div 添加一个元素，其类名为classes.elements

import React, { useRef } from 'react'
import classes from './AddElement.scss'
const AddElement = (props) => {
  const elementRef = useRef(null)

  const addElement = () => {
   <p>This is paragraph</p>
  }

  return (
    <div>
      <button onClick={() => addElement()}>Click here</button>
      <div ref={elementRef} className={classes.elements}>

      </div>
    </div>
  )
}
export default AddElement;

标签： javascriptreactjs

Answer 1

您可以尝试像这样使用 useState 钩子：

import React, { useState } from 'react';
import classes from './AddElement.scss';

const AddElement = () => {
  const [dynamicElems, setDynamicElems] = useState([]);

  const addElement = () => {
    // Creates the dynamic paragraph
    const newDynamicElem = <p className={classes.elements}>This is paragraph</p>;
    // adds it to the state
    setDynamicElems(() => [...dynamicElems, newDynamicElem]);
  };

  return (
    <div>
      <button onClick={() => addElement()}>Click here</button>
      <div className={classes.elements}>{dynamicElems}</div>
    </div>
  );
};
export default AddElement;