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

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

您可以使用列列表中的formatter属性在行上显示图像。 列列表应如下

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