如何创建一个HTML/JavaScript元素，当我单击它时，它会在React.js中显示一个不同的元素？

Question

基本上，我让这些<img/>元素有点像一堆堆叠在表格中的按钮。在代码中，它们是通过循环(React.js中的.map())创建的。

我想知道在实现单击按钮并使其“翻转”或基本上显示一个新元素(比如<p></p> )的位置时，最实用和最高效的方法。

我应该将<img />包装在<div>中吗？还是什么都没有？

我可以想到几种方法来实现上面描述的功能，比如让<p></p>最初显示“none”，当单击“initial.‘”时显示“initial.’”。我在一个JavaScript DOM事件侦听器中实现了这一点，但我正在尝试使用React的新方法，我认为我的代码非常初级且效率低下。

如何在React.js中实现这种“点击翻转”功能？它“翻转”或者基本上显示一个新元素，比如<p></p>，来代替它。

Answer 1

您可以使用state来显示图像或其他内容。更改用户单击镜像标签时的状态。根据render函数中的状态显示内容。

constructor {
   this.state = {
       mode: 'image'
   }
}


render() {
const {mode} = this.state;
    return (
        <React.Fragment>
        {
            mode === "image" ? <img onClick={()=>{this.setState("div")}}/>:(
                <div>//content here</div>
            )             
        }
        </React.Fragment>
    )
}