Question

我已使用以下方法在我的React组件Adbanner中导入图像： -

import ad1 from '../assets/ad1.png';
import ad2 from '../assets/ad2.png';
import ad3 from '../assets/ad3.png';
import ad4 from '../assets/ad4.png';

但是现在我无法在我的函数中访问它如何在函数中使用它？将{ad1}括在括号内似乎没有帮助＆gt;我理解它不是DOM部分。可以做些什么？

class Adbanner extends React.Component{

getVal() {
    document.getElementById('ad').src={ad1};
}

Answer 1

在函数中，只需访问正常的JavaScript DOM操作，如下所示：

   let myImage = document.createElement("img");
   myImage.setAttribute("src",require('../images/loader.gif'));
   document.body.appendChild(myImage);

请确认这是否对您有所帮助： - ）

Answer 2

为什么你甚至使用dom操作来反应。我的方法是使用州。

＆＃13;

import ad1 from '../assets/ad1.png';
import ad2 from '../assets/ad2.png';
import ad3 from '../assets/ad3.png';
import ad4 from '../assets/ad4.png';

class Adbanner extends React.Component {
    constructor(props) {
      super(props);

      //Add the default state
      this.state = {
        img1: ""
      }
    }
    //Now you can update the state with you image
    getVal() {
      this.setState({
        img1: ad1
      })
    }

    render() {
      //Call the state image inside the src
      return ( <
        img src = {
          this.state.img1
        }
        onClick = {
          this.getVal()
        }
        />
      )
    }

＆＃13;

如何在类中的函数内使用React中的导入图像？

2 个答案: