如何在反應中創建動態元素？

Question

我正在嘗試在單擊按鈕時動態創建元素，並使用 ref 將 append 它添加到其中一個類中。

我可以使用document.createElement但從我讀到的內容中不要在反應中使用它

例如，我想通過單擊按鈕將<p>的元素添加到帶有classes.elements的 class 名稱的 div

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;

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;

Answer 2

嘗試這個：

const addElement = () => {
  const para = document.createElement("p");
  para.innerHTML = 'Hello';
  elementRef.current.appendChild(para);
};

<div ref={elementRef}></div>
<button onClick={addElement}>Click me</button>

Answer 3

const AddElement = (props) => {
  
  const [dynamicCompList, setDynamicCompList] = useState([]);   

  const addElement = () => {
   const dynamicEl = React.createElement("p", {}, "This is paragraph");
   setDynamicCompList(dynamicCompList.concat(dynamicEl)); 
  }

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

Answer 4

方法一

import React, { useRef, useState } from "react";

import classes from "./App.module.scss";

export default function App() {
  const componetRef = useRef(null);
  const [contentValue, setContentValue] = useState([]);

  const addElement = () => {
    const content = "this is para";
    const type = componetRef.current.dataset.type || "p";
    const classNames = componetRef.current.className;

    const elemnt = React.createElement(type, { key: Date.now() }, content);

    setContentValue([
      ...contentValue, // If you dont want to make it multiple times. just remove it
      elemnt
    ]);
  };
  return (
    <div className="App">
      <button onClick={addElement}>Click here</button>

      <div data-type="h1" ref={componetRef} className={classes.tag1}>
        {contentValue}
      </div>
    </div>
  );
}

方法二

import React, { useState } from "react";
import classes from "./App.module.scss";

const NewComponent = ({ classNames, content }) => {
  return (
    <div className={classNames} dangerouslySetInnerHTML={{ __html: content }} />
  );
};
export default function App() {
  // const classRef = useRef(null);
  const [multiple, setMultiple] = useState([]);
  const addElement = (e) => {
    const classNames = e.target.dataset.class;
    const content = e.target.dataset.content;
    
    setMultiple([
      ...multiple, // If you dont want to make it multiple times. just remove it
      <NewComponent
        key={Date.now()}
        classNames={classNames}
        content={content}
      />
    ]);
  };
  return (
    <div className="App">
      <button
        onClick={addElement}
        data-class={classes.tag1}
        data-content={"<p>asdasd</p>"}
      >
        Click here
      </button>
      {multiple}
    </div>
  );
}

如果您有更多問題，請告訴我。 這里是 沙盒