reactjs - 如何在 react-data-grid 中禁用默认标题

Question

react-data-grid 每个单元格都有默认的工具提示。它会自动添加标题属性。我不想要那个工具提示，我该如何隐藏它？

另外，我不想使用自定义 formatter。我认为这将是开销。

例如尝试将鼠标悬停在任何单元格上

在此处查看关于 Kristin 的不需要的工具提示

标签： reactjsreact-data-grid

Answer 1

没有自定义可能无法四处走动formatter

至于开销，请查看它使用SimpleCellFormatter https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/formatters/SimpleCellFormatter.js的实现那里没什么特别的

class SimpleCellFormatter extends React.Component {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.bool])
  };

  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div title={this.props.value}>{this.props.value}</div>;
  }
}

让您的自定义格式化程序像这样（除title属性外与上面相同）：

class CustomSimpleCellFormatter extends React.Component {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.bool])
  };

  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div >{this.props.value}</div>;
  }
}

它附着在你的columns

const columns = [
  {
    key: "id",
    name: "ID",
    sortDescendingFirst: true
  },
  {
    key: "title",
    name: "Title",
    title: false
  },
  {
    key: "firstName",
    name: "First Name",
formatter: CustomSimpleCellFormatter,
  },
...

希望有帮助。