如何在 react-data-grid 中创建自定义行渲染器答案

【问题标题】：How to create custom row renderer in react-data-grid如何在 react-data-grid 中创建自定义行渲染器
【发布时间】：2018-07-11 17:47:13
【问题描述】：

我尝试this 在 react-data-grid 中呈现自定义行。但是如何为图像创建自定义行。我有两列名为 image_large 和 image_small。自定义行渲染器的代码如下：

<div className="row" style={{minHeight: 300, margin: 20}}>
            <div className="col-md-6">
                <img onClick={() => this.button()}
                     src={this.state.imagePath}
                     id='image'
                     style={{maxWidth: '100%'}}/>
            </div>
        </div>

【问题讨论】：

您的问题不清楚，请详细说明应该怎么做。您真的想要两个自定义列吗？
我需要在三列中显示三张图片。
假设你有一个对象 ={id: 1, image_large: SomeImagePath, image_medium: SomeImagePath, image_medium: SomeImagePath}。如何在 react-data-grid 中显示它们？

标签： reactjs react-data-grid

【解决方案1】：

您可以使用列列表上的格式化程序属性在行上显示图像。列列表应如下所示

let columns = [
  {
    key: 'image_small',
    name: 'Image Small',
    getRowMetaData: (row) => row,
    formatter:ImagesmFormatter
  },
  {
    key: 'image_medium',
    name: 'Image Medium',
    getRowMetaData: (row) => row,
    formatter: ImagemdFormatter
  },
  {
    key: 'image_large',
    name: 'Image Large',
    getRowMetaData: (row) => row,
    formatter: ImagelgFormatter
  }]

Image small 的列格式化程序如下

class ImagesmFormatter extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.value}/> //this.props.value should contain the path
      </div>
    )
  }
}

【讨论】：

谢谢。让我先实现。