Ag grid 显示网格后，如何更改列标题？

我正在使用ag grid react组件，我希望能够更改网格中的列标题，以响应react组件中的事件。我可以看到列API有一个getDisplayNameForColumn（）函数，但是我找不到一个等效的设置函数来允许我更改列标题

我将网格列定义数组存储在我的React组件的状态中，我认为只要在React框架自动刷新组件的状态下更新定义数组，就会显示我的新列标题；然而，这并没有发生，原来的标题仍然存在

是否可以在网格初始化和显示后更改列标题？我已经复制了下面React组件的代码

import React, { Component } from 'react'
import { Page, Header, Title, Button, Content } from '@cdkglobal/react-jqm'
import StatusBar from '@cdkglobal/react-jqm-statusbar'
import StandardColsList from './StandardColsList'
import { AgGridReact } from 'ag-grid-react'
import { APP_TITLE } from '../constants'
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/theme-fresh.css';

export default class DatasetPage extends Component {
static propTypes = {
    onClickBack: React.PropTypes.func,
    onClickSave: React.PropTypes.func,
    dataset: React.PropTypes.array.isRequired,
    uploaditem: React.PropTypes.object.isRequired,
    stdcolumns: React.PropTypes.array
}

static defaultProps = {
    dataset: []
}

state = {
    gridApi: {},
    columnApi: {},
    columnDefs: [],
    displaystdcols: false,
    selectedcol: -1

}

componentDidMount() {
    if (this.props.onInit) {
        this.props.onInit()
    }

    this.setState({ columnDefs: this.buildColumns(this.props.dataset[0]) })

}

buildColumns(sampleRow) {
    // Build a columns definition array for the React data grid component
    let columns = []
    let colIndex = 0

    for (let column in sampleRow) {

        let columnDef = {
            colId: colIndex,
            field: column,
            headerName: column,
            minWidth: '80px',
            stdcolIndex: -1
        }

        colIndex++
        columns.push(columnDef)
    }

    return columns

}

onGridReady(params) {
    this.setState({ gridApi: params.api })
    this.setState({ columnApi: params.columnApi })
}

render() {

    const columnDefs = this.state.columnDefs
    const agDivStyle = {
        height: '500px'
    }

    const onCellClicked = (event) => {
        // Set the selected column index
        this.setState({ selectedcol: event.colDef.colId })

        // Display the standard columns popup
        this.setState({ displaystdcols: true })
    }

    const onSaveColMapping = (selectedStdCol) => {
        // Save the column mapping
        const columnApi = this.state.columnApi
        const column = columnApi.getColumn(this.state.selectedcol)

        if (selectedStdCol > -1) {

            // Update the column definition for the selected column
            let columnDefs = this.state.columnDefs
            columnDefs[this.state.selectedcol].stdcolIndex = selectedStdCol
            columnDefs[this.state.selectedcol].headerName = this.props.stdcolumns[selectedStdCol].description
            this.setState({ columnDefs: columnDefs })

            column.colDef.headerName = this.props.stdcolumns[selectedStdCol].description
            column.colDef.stdcolIndex = selectedStdCol
            console.log(column)
            console.log(columnApi.getDisplayNameForColumn(column))

            // Now refresh the grid
            // columnApi.setColumnState(columnDefs)
            this.state.gridApi.refreshView()

        }

        // Hide the standard columns popup
        this.setState({ displaystdcols: false })
    }

    const onClosePopup = () => {
        this.setState({ displaystdcols: false })
    }

    let stdcolspopup
    if (this.state.displaystdcols) {
        stdcolspopup = (
            <StandardColsList standardcols={this.props.stdcolumns} selectedcoldef={this.state.columnDefs[this.state.selectedcol]} onClickOK={onSaveColMapping} onClickCancel={onClosePopup} />
        )

    }


    return (
        <Page>
            <Header>
                <Button icon="carat-l" corners shadow pos="left" alt={false} onClick={this.props.onClickBack}>Back</Button>
                <Title>{APP_TITLE}</Title>
                <Button primary corners shadow pos="right" icon="plus" alt={false} onClick={this.props.onClickSave}>Save</Button>
                <StatusBar name={this.props.uploaditem.uploadfile} />
            </Header>

            <Content className="has-status-bar">
                <div className="ag-fresh" style={agDivStyle}>
                    <AgGridReact

                        // listen for events with React callbacks
                        // onRowSelected={this.onRowSelected.bind(this)}
                        onCellClicked={onCellClicked}
                        onGridReady={this.onGridReady.bind(this)}

                        // binding to properties within React State or Props
                        // showToolPanel={this.state.showToolPanel}
                        // quickFilterText={this.state.quickFilterText}
                        // icons={this.state.icons}

                        // column definitions and row data are immutable, the grid
                        // will update when these lists change
                        columnDefs={columnDefs}
                        rowData={this.props.dataset}

                        // or provide props the old way with no binding
                        enableColResize="true"
                        rowSelection="multiple"
                        suppressRowClickSelection="true"
                        enableSorting="true"
                        enableFilter="false"
                        rowHeight="22"
                        />

                    {stdcolspopup}
                </div>

            </Content>
        </Page>
    )

}

import React，{Component}来自“React”
从'@cdkglobal/react jqm'导入{页面、标题、标题、按钮、内容}
从“@cdkglobal/react jqm StatusBar”导入状态栏
从“./StandardColsList”导入StandardColsList
从“ag grid react”导入{AgGridReact}
从“../constants”导入{APP_TITLE}
导入'ag-grid/dist/styles/ag-grid.css'；
导入'ag grid/dist/styles/theme fresh.css'；
导出默认类DatasetPage扩展组件{
静态类型={
onClickBack:React.PropTypes.func，
onClickSave:React.PropTypes.func，
数据集：React.PropTypes.array.isRequired，
uploaditem:React.PropTypes.object.isRequired，
stdcolumns:React.PropTypes.array
}
静态defaultProps={
数据集：[]
}
状态={
gridApi:{}，
columnApi:{}，
columnDefs:[]，
displaystdcols:false，
选定列：-1
}
componentDidMount（）{
如果（此.props.onInit）{
this.props.onInit（）
}
this.setState（{columnDefs:this.buildColumns（this.props.dataset[0]））
}
建筑柱（采样器）{
//为React数据网格组件构建列定义数组
让列=[]
设colIndex=0
for（让列进入sampleRow）{
设columnDef={
科利德：科林德斯，
字段：列，
标题名称：列，
minWidth:'80px'，
stdcolIndex:-1
}
科林德斯++
columns.push（columnDef）
}
返回列
}
onGridReady（参数）{
this.setState（{gridApi:params.api}）
this.setState（{columnApi:params.columnApi}）
}
render（）{
const columnDefs=this.state.columnDefs
常量agDivStyle={
高度：“500px”
}
const onCellClicked=（事件）=>{
//设置所选列索引
this.setState（{selectedcol:event.colDef.colId}）
//显示标准列弹出窗口
this.setState（{displaystdcols:true}）
}
const onSaveColMapping=（selectedStdCol）=>{
//保存列映射
const columnApi=this.state.columnApi
const column=columnApi.getColumn（this.state.selectedcol）
如果（已选择stdcol>-1）{
//更新选定列的列定义
让columnDefs=this.state.columnDefs
columnDefs[this.state.selectedcol].stdcolIndex=selectedStdCol
columnDefs[this.state.selectedcol].headerName=this.props.stdcolumns[selectedStdCol].description
this.setState（{columnDefs:columnDefs}）
column.colDef.headerName=this.props.stdcolumns[selectedStdCol].description
column.colDef.stdcolIndex=selectedStdCol
console.log（列）
console.log（columnApi.getDisplayNameForColumn（column））
//现在刷新网格
//columnApi.setColumnState（columnDefs）
this.state.gridApi.refreshView（）文件
}
//隐藏标准列弹出窗口
this.setState（{displaystdcols:false}）
}
const onClosePopup=（）=>{
this.setState（{displaystdcols:false}）
}
让stdcols弹出
if（this.state.displaystdcols）{
stdcolspoop=(
)
}
返回(
返回
{APP_TITLE}
拯救
{stdcolspoop}
)
}

---

}不是特定于react的，但这是使用普通的旧JavaScript的方法：

var makeCol = gridOptions.columnApi.getColumn("make")
makeCol.colDef.headerName="New Header Name";
gridOptions.api.refreshHeader();

很明显，这可以被封装在一个函数中，当您希望更新头时调用该函数