Question

我是React中的新手，我在点击同一图片然后显示其他文件夹中的下拉组件后尝试隐藏图像。我该怎么做？

我目前陷入了无法隐藏相同图片的情况，并且在不同位置显示相同的图片。

或者有更好的方法吗？

以下是代码

import React from 'react';
import mind_zebra from '../../images/MindScribe-zebra.png';
import dropdown from '../DropDown/DropDown.js';
import './entry.css';

class Entry extends React.Component {

  state = { hideZebraPic : false};

  onClickHandler = () => {
    this.setState( prev => ({ hideZebraPic : !prev.hideZebraPic }));
  };

  render() {
    return (
      <div>
        <img src={mind_zebra} onClick={this.onClickHandler} className="MindZebraPic" alt="zebra"/>
        {this.state.hideZebraPic ? <Entry /> : null}
      </div>
    );
  }
}

Answer 1

在您的代码中，始终呈现图片。没有条件不在render函数中呈现它。

如果我正确理解您想要实现的目标，render函数的正确代码将是：

render() {
  if (this.state.hideZebraPic) {
    return <Dropdown />;
  } else {
    return <img src={mind_zebra} onClick={this.onClickHandler} />;
  }
}

也可以这样写：

render() {
  return (
    <div>
      {!this.state.hideZebraPic && (
        <img src={mind_zebra} onClick={this.onClickHandler} />
      )}
      {this.state.hideZebraPic && <Dropdown />}
    </div>
  );
}

如何在Reactjs中显示/隐藏相同的组件

1 个答案: