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>
  );
}

点击

1 个答案: