时间戳

首页 > 解决方案 > 在页面上输出图像反应javascript

javascript - 在页面上输出图像反应javascript

问题描述

我已经spinner.js像这样定义了一个图像：

 import React from 'react';
import broomAndText from './mygif.gif';


function myGif() {
    return <img src={broomAndText} alt="broomAndText" width="200px" height="200px" />
}

export default myGif;

然后我想调用图像，并将其显示在我的mainPage.js. 这是我试图称呼它的方式：

    import myGif from './spinner'
var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 


      var firstName = doc.data().firstname;
      var lastName = doc.data().lastname;
      var companyName = doc.data().companyname;
      var email = doc.data().email;
      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)


      if (regData == "yes"){
       
        regData = {myGif}

    }
}).then(() => {

  if (regData != "no") {
    
    document.write(regData)
  }


})

我究竟做错了什么？它只是输出[object Object]

标签： javascriptreactjs

解决方案

我认为您需要的是正确渲染您的反应元素。而不是仅仅通过将文本写入 html，document.write()您需要将其呈现给一些现有的 DOM 元素。例如， adiv里面的 a body：

import ReactDOM from 'react-dom'
import MyGif from './spinner'

const div = document.createElement('div')

div.id = '__root'

document.body.appendChild(div)
ReactDOM.render(<MyGif/>, document.getElementById('__root'))

另请注意，我myGif用 PascalCase 替换了您的驼峰式表示法，因为反应会以另一种方式错误地解释它。您还需要将元素放在 xml 标记（<>大括号）中以实际创建它并使其工作。

作为第一步，您可以替换document.write(regData)为ReactDOM.render(myGif, document.getElementsByTagName('body')它应该可以工作。但从长远来看，最好查看一些关于渲染过程如何在反应中工作的基本反应教程。它并不像将纯 html 放入文档那么简单。

推荐阅读