第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

將 React 組件動態(tài)添加到 DIV 或其他反應(yīng)應(yīng)用中

將 React 組件動態(tài)添加到 DIV 或其他反應(yīng)應(yīng)用中

慕娘9325324 2022-09-29 17:25:30
上下文我正在嘗試根據(jù)事件 f.g onClick 事件將 React 組件動態(tài)添加到 DIV/另一個(gè) React 組件中。我嘗試過并且知道我可以通過JS將任何HTML元素添加到DIV中,只需創(chuàng)建元素并附加到DIV中即可。但我想將 react 組件添加到 DIV 中。問題:當(dāng)我將 React 組件追加到 DIV 中時(shí),它將添加 [對象對象],我正在尋找一種方法來呈現(xiàn)和插入 React 組件到 DIV 中。這是代碼沙箱 : 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>      );    }
查看完整描述

2 回答

?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

查看實(shí)現(xiàn)?;旧希枰褂?useState React Hook 來存儲要添加為畫布子級的所有組件。

export default function App() {

  const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);

  return (

    <div className="App">

      <Button

        event={() => {

          setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);

        }}

      />

      <div className="canvos">{buttonsOnCanvos}</div>

    </div>

  );

}


查看完整回答
反對 回復(fù) 2022-09-29
?
ibeautiful

TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊

您不需要直接訪問 DOM。您可以有一個(gè)狀態(tài)來指示是否顯示元素。然后,有條件地在 div 中呈現(xiàn) 。.canvos<Button />


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>

  );

}

請注意,我將該函數(shù)移到了組件中。addToCanvosApp


查看完整回答
反對 回復(fù) 2022-09-29
  • 2 回答
  • 0 關(guān)注
  • 380 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號