简体   繁体   English

React-从其他类访问地图属性

[英]React - Accessing map properties from a different class

I am pretty new to react and there are things I don't even know how to search for in google. 我是个新手,有些事情我什至都不知道如何在Google中搜索。

Ok so I have a class in which I am rendering an image gallery by mapping the images of the item. 好的,所以我有一个通过映射项目图像来呈现图像库的类。 Bellow is the example code: 贝娄是示例代码:

example.images.map((img,i) => { 
                return <div className="Class1" key={'image_' + i}>
                  <div className="Class2">
                    <img src={img.Url} alt={'image_' + i} onClick={this.doSomething}/>
                  </div>
                  <a className="Class3" onClick={doSomethingElse(img)}></a>
                </div>

And then there is another class inside the same file (not as a different component) on which I am creating a modal (module cloned from git) and all I want to do is to pass the {img.Url} from the mapping, all the way up to this modal class which is as follow: 然后,在同一文件(不是作为不同的组件)中还有另一个类,我在该类上创建模式(从git克隆的模块),我要做的就是从映射中传递{img.Url},所有到达此模态类的方式如下:

class Modal extends Component {


  render() {
    const { onClose, isOpen } = this.props;

    //THIS IS WHERE I WANT TO PLACE THE URL FROM THE MAPPING
    const GrabUrl  = {how.to.do.it.?} ;

    return  (
      <Modal ariaHideApp={ false }
          isOpen={ isOpen }
          contentLabel="Modal"
          onRequestClose={ onClose }>

      <a className="closeModal" onClick={onClose}>X</a>

            <div className="Class4"><img src={GrabUrl} /></div>
      </Modal>
    )
  }
}

Is what I am trying to do even possible ? 我正在尝试做的甚至有可能吗?

If I understand correctly, yes it is, 如果我理解正确,是的,

you have to pass the img.Url as an argument to the doSomething function like this : 您必须像这样将img.Url作为参数传递给doSomething函数:

<img src={img.Url} alt={'image_' + i} onClick={() => this.doSomething(img.Url}/>

Then you can handle the modal from there. 然后,您可以从那里处理模态。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM