Javascript 使用onClick渲染的最简单方法<；img>；你有什么反应？

我在寻找一种在按钮打开时显示图像的方法。这似乎是一项非常简单的任务，它将极大地帮助我理解如何去做。我试过这样的东西，但没有任何效果

这是返回svg图像的函数：

import dfElement from '../vectors/dfElement.svg';

function renderElement(){
  return  <img src={dfElement}/>
}

从“../vectors/dfElement.svg”导入dfElement；
函数renderElement（）{
返回
}

这是调用函数以返回svg的类：

class DF extends Component {

    render() {

      return (

      <div >

        <div >
        <button onClick={this.renderElement}>df</button>
        </div>

      </div>
    );
  }
}

export default DF

类DF扩展组件{
render（）{
返回(
df
);
}
}
导出默认DF

我使用了

功能组件
和
useState（）

这是一种制作组件的简单方法

参考>


函数应用程序（）{
const[toggle，setToggle]=React.useState（false）；
返回(
setToggle（（prev）=>（！prev））}>切换！


{
切换&&
}
)
}
ReactDOM.render（，document.getElementById（'root'））
我使用了
功能组件
和
useState（）

这是一种制作组件的简单方法

参考>


函数应用程序（）{
const[toggle，setToggle]=React.useState（false）；
返回(
setToggle（（prev）=>（！prev））}>切换！


{
切换&&
}
)
}
ReactDOM.render（，document.getElementById（'root'））

控制台中出现了什么错误？控制台中出现了什么错误？