Reactjs AG网格：cellRenderer禁用值格式化程序

我的AG网格中有一个自定义的

cellRenderer

，我正在使用

valueformatter

：

const columnDefs = R.map(
  R.pipe(x => ({
    headerName: strings[x.name],
    field: x.name,
    valueFormatter: contactInformationFormatter,
    comparator:
      x.name === 'group' || x.name === 'tendency'
        ? selectValueToComparableNumber
        : null,
    cellRenderer: x.compenent !== 'select' ? 'highlightCellRenderer' : null,
    cellEditor: componentToCellEditors[x.component],
    cellEditorParams:
      x.component === 'select' ? cellEditorParams[x.name] : null,
    getQuickFilterText: function(params) {
      return x.component === 'select' ? null : params.value;
    },
  })),
  contactInformationCells
);

function contactInformationFormatter(params) {
  return strings[params.value] || params.value;
}

import React from 'react';
import { useSelector } from 'react-redux';

import { getSearchValue } from '../../layout/header/search-value-reducer';

function HighlightCellRenderer({ value, ...props }) {
  const searchValue = useSelector(getSearchValue);
  if (searchValue && value.toLowerCase().includes(searchValue)) {
    return <strong>{value}</strong>;
  }
  return <span>{value}</span>;
}

export default HighlightCellRenderer;

如果排除

cellRenderer

，则会正确显示格式化的值。如果我包括它，我会得到未转换的值。这是虫子吗

这是我的格式化程序和我的

cellRenderer

：

const columnDefs = R.map(
  R.pipe(x => ({
    headerName: strings[x.name],
    field: x.name,
    valueFormatter: contactInformationFormatter,
    comparator:
      x.name === 'group' || x.name === 'tendency'
        ? selectValueToComparableNumber
        : null,
    cellRenderer: x.compenent !== 'select' ? 'highlightCellRenderer' : null,
    cellEditor: componentToCellEditors[x.component],
    cellEditorParams:
      x.component === 'select' ? cellEditorParams[x.name] : null,
    getQuickFilterText: function(params) {
      return x.component === 'select' ? null : params.value;
    },
  })),
  contactInformationCells
);

function contactInformationFormatter(params) {
  return strings[params.value] || params.value;
}

import React from 'react';
import { useSelector } from 'react-redux';

import { getSearchValue } from '../../layout/header/search-value-reducer';

function HighlightCellRenderer({ value, ...props }) {
  const searchValue = useSelector(getSearchValue);
  if (searchValue && value.toLowerCase().includes(searchValue)) {
    return <strong>{value}</strong>;
  }
  return <span>{value}</span>;
}

export default HighlightCellRenderer;

函数contactInformationFormatter（参数）{
返回字符串[params.value]| | params.value；
}
从“React”导入React；
从'react redux'导入{useSelector}；
从“../../layout/header/search value reducer”导入{getSearchValue}；
函数HighlightCellRenderer（{value，…props}）{
const searchValue=useSelector（getSearchValue）；
if（searchValue&&value.toLowerCase（）.includes（searchValue））{
返回{value}；
}
返回{value}；
}
导出默认的HighlightCellRenderer；

这不是一个bug。您必须使用

cellRenderer

的

params

中的

valueFormatted

属性来获取

valueFormatter

的格式化输出<代码>值属性保存原始未格式化数据。因此，

cellRenderer

将如下

function HighlightCellRenderer({ valueFormatted, ...props }) {
  const searchValue = useSelector(getSearchValue);
  if (searchValue && valueFormatted.toLowerCase().includes(searchValue)) {
    return <strong>{valueFormatted}</strong>;
  }
  return <span>{valueFormatted}</span>;
}

函数HighlightCellRenderer（{valueFormatted，…props}）{
const searchValue=useSelector（getSearchValue）；
if（searchValue&&valueFormatted.toLowerCase（）.includes（searchValue））{
返回{valueFormatted}；
}
返回{valueFormatted}；
}

谢谢，我绞尽脑汁想找出问题所在。ag grid文档说“可以同时使用两者，在这种情况下，值格式化程序的结果将传递给单元格渲染器。”-但是他们没有提到您必须使用valueFormatted字段。如果有人对带值格式化程序和不带值格式化程序的字段重复使用相同的单元格渲染器-`value=params.valueFormatted=无效的params.valueFormatted：params.value`