如何在反应数据网格中创建自定义行渲染器

Question

我尝试 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>

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

如何在反应数据网格中创建自定义行渲染器

How to create custom row renderer in react-data-grid

reactjs

react-data-grid