Question

我正在尝试设置一个计时器来改变反应中的img src但似乎这不起作用。我看到要编写javascript我们需要用括号括起来我做了但是它仍然没有帮助。代码： -

class Default extends Component{
    render() {
    return (
       <div>              
          <Grid.Row style={{height: '250px',margin:'-10px'}} className="adbanner"> 
            <input id="ad" type="image" src={ad1} style={{position:'absolute',height:'50%',width:'100%'}}></input>
              {
                setTimeout(myFunction, 3000)
                myFunction{
                document.getElementById("ad").src="ad2";
                }
              }   

          </Grid.Row>
       </div>
    );
  }
}
export default Default;

Answer 1

在花括号中包装是指您想要在屏幕上呈现某些内容。您正在寻找执行算法操作，不涉及渲染。在这种情况下，它不属于render

看起来您正在寻找在组件安装时自动运行该功能。反应生命周期事件componentDidMount是该操作的完美运行。我冒昧地修复myFunction的语法并将其放在组件class之外。

function myFunction{
    document.getElementById("ad").src="ad2";
}

class Default extends Component{
    componentDidMount() {
        setTimeout(myFunction, 3000)
    }

    render() {
        return (
            <div>              
                <Grid.Row style={{height: '250px',margin:'-10px'}} className="adbanner"> 
                    <input id="ad" type="image" src={ad1} style={{position:'absolute',height:'50%',width:'100%'}}></input>
                </Grid.Row>
            </div>
        );
    }
}
export default Default;

如何在反应中编写javascript函数？

1 个答案: