将参数传递给 Modal 窗口 Antd React答案

【问题标题】：Passing the parameter to the Modal window Antd React将参数传递给 Modal 窗口 Antd React
【发布时间】：2018-08-01 12:50:21
【问题描述】：

我正在尝试使用 react 和 antd 创建一个弹出模式窗口，所以当我单击图像时，它会以全尺寸显示相同的图像。

问题是我无法在模态窗口中传递 record.url，即使我对第一张图像使用相同的参数并且效果很好。

render: (text, record) =>
    <div>
      <img id="img1" src={'http://127.0.0.1:8887/' + record.url} onClick={this.handlePreview}/>

      <Modal visible={this.state.previewVisible} onCancel={this.handleCancel}>
          <img src={'http://127.0.0.1:8887/ZmrLMKlc.jpg' } />  // What I need
          <img src={'http://127.0.0.1:8887/' + record.url} />  // My attempt
      </Modal>
    </div>

我该怎么做，或者有没有办法在渲染方法中声明一个变量来以这种方式获取 src？

var = document.getElementById("img1").src;

【问题讨论】：

标签： reactjs user-interface react-redux frontend antd

【解决方案1】：

云你这样做

render: (text, record) =>{
const imgSrc = `http://127.0.0.1:8887/${record.url}`;
return(<div>
  <img id="img1" src={imgSrc} onClick={this.handlePreview}/>

  <Modal visible={this.state.previewVisible} onCancel={this.handleCancel}>
      <img src={imgSrc} />  // What I need
      <img src={'http://127.0.0.1:8887/' + record.url} />  // My attempt
  </Modal>
</div>)
}

所以我要做的是创建一个保存 src 的新变量，然后将其传递给 image 以及 Modal 中的 image。

【讨论】：

这种方式只适用于图像，但不适用于模态。