Как создать динамический элемент в react?

#javascript #reactjs

Вопрос:

Я пытаюсь динамически создать элемент при нажатии кнопки и добавить его в один из классов с помощью ссылки.

Я могу использовать document.createElement , но из того, что я прочитал, не используйте его в react

Например, я хочу добавить элемент <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;

1. что вы имеете в виду, добавляя его в классы?

2. Я имею в виду добавить в div с именем класса classes.elements

3. вы пытаетесь добавить тег p или html, найдя имя класса при нажатии на кнопку?

4. @MonzoorTamal Я пытаюсь добавить тег p, находя имя класса при нажатии на кнопку.

Ответ №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;

Ответ №2:

 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;

Ответ №3:

Попробуйте это:

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

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

Ответ №4:

Подход 1

 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>
  );
}

Подход 2

 
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>
  );
}

Дайте мне знать, если у вас возникнут дополнительные вопросы.
Вот песочница