javascript - Dynamically add React components into DIV or another react App - Stack Overflow

admin管理员组

文章数量:1295315

CONTEXT

I'm trying to dynamically add the React ponent into DIV/Another React ponent base on event f.g onClick event.

I tried and know I can add any HTML element into DIV by JS, simply by createElement and append into the DIV. But I want to add the react ponent into DIV.

Problem:

When I append React ponent into DIV, It will add [object Object], I am looking for a way to be able to render and insert React Components into DIV.

Here is codeSandBox : =/src/App.js

    import React from "react";
    import "./styles.css";
    import Button from "./Button";

    const addToCanvos = () => {
      var canvos = document.querySelector(".canvos");
      canvos.append(<Button />);
    };

    export default function App() {
      return (
        <div className="App">
          <Button event={addToCanvos} />
          <div className="canvos" />
        </div>
      );
    }

CONTEXT

I'm trying to dynamically add the React ponent into DIV/Another React ponent base on event f.g onClick event.

I tried and know I can add any HTML element into DIV by JS, simply by createElement and append into the DIV. But I want to add the react ponent into DIV.

Problem:

When I append React ponent into DIV, It will add [object Object], I am looking for a way to be able to render and insert React Components into DIV.

Here is codeSandBox : https://codesandbox.io/s/frosty-bouman-f95mx?file=/src/App.js

    import React from "react";
    import "./styles.css";
    import Button from "./Button";

    const addToCanvos = () => {
      var canvos = document.querySelector(".canvos");
      canvos.append(<Button />);
    };

    export default function App() {
      return (
        <div className="App">
          <Button event={addToCanvos} />
          <div className="canvos" />
        </div>
      );
    }

• javascript
• reactjs

Share Follow asked Jun 11, 2020 at 22:25 AJ-AJ- 1,16733 gold badges1313 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Checkout this implementation. Basically you need to use the useState React Hook to store all the ponents that you want to add as children of the canvas.

export default function App() {
  const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);
  return (
    <div className="App">
      <Button
        event={() => {
          setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);
        }}
      />
      <div className="canvos">{buttonsOnCanvos}</div>
    </div>
  );
}

You don't need to access the DOM directly. You can have a state to indicate whether to show the .canvos element or not. Then you render the <Button /> in the div conditionally.

export default function App() {
  const [showCanvos, setShowCanvos] = useState(false);

  const addToCanvos = () => {
    setShowCanvos(true)
  };

  return (
    <div className="App">
      <Button event={addToCanvos} />
      <div className="canvos">
        {showCanvos && <Button />}
      </div>
    </div>
  );
}

Notice that I moved the addToCanvos function into the App ponent.

本文标签： javascriptDynamically add React components into DIV or another react AppStack Overflow