React js渲染链接与照片并点击后挂载另一个组件

Question

这是我在这里的第一个问题，我是新人:)，

我有一个 API，我正在尝试对其进行映射并创建带有照片的链接，因此当用户单击照片时，我想从该帖子中呈现具有更多详细信息的另一个组件。 API 有 300 多个项目，所以我需要一些专业的东西来实现它

我尝试映射路线并将其放在 Switch + 映射包含照片的链接。浏览器将路由到该地址，但另一个组件不会挂载或挂载在主组件下。一个多星期以来，我一直在尝试/寻求解决此问题。

提前感谢大家

Answer 1

如果您需要在具有不同 url 的单独页面上显示详细信息，您可以使用 react-router 之类的内容。如果您只需要在同一页面中显示其他详细信息，则可以使用以下内容：

class Image extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      showDetails: false,
    };

    this.onImageClick = this.onImageClick.bind(this);
  }

  onImageClick() {
    this.setState({ showDetails: true });
  }

  renderDetails() {
    if (!this.state.showDetails) {
      return;
    }

    return (
      <div>
        Additional details
      </div>
    );
  }

  render() {
    return (
      <div>
        <img src={this.props.src} onClick={this.onImageClick} />
        {this.renderDetails()}
      </div>
    );
  }
}

function ImagesList({ images }) {
  return (
    <div>
      {images.map((data) => (
        <Image key={data.someKey} {...data} />
      ))}
    </div>
  );
}