Question

我创建了一个方法renderSortIcon，在该方法中我想在此方法中渲染图标，我传递了一个参数列，但是当我执行column.path时，未定义通过我的错误路径，但是当我执行console.log时，它显示了路径

这是我的代码

class TableHeader extends Component {
  raiseSort = path => {
    const sortColumn = { ...this.props.sortColumn };
    if (sortColumn.path === path)
      sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
    else {
      sortColumn.path = path;
      sortColumn.order = "asc";
    }
    this.props.onSort(sortColumn);
  };

  renderSortIcon = column => {
      // console.log(column.path)
      const {sortColumn} = this.props

    if (column.path !== sortColumn.path) return null;
    if (sortColumn.order === "asc") return <i className="fa fa-sort-asc" />;
    return <i className="fa fa-sort-desc" />;
  };

  render() {
    return (
      <thead>
        <tr>
          {this.props.columns.map(column => (
            <th
              className="clickable"
              key={column.path || column.key}
              onClick={() => this.raiseSort(column.path)}
            >
              {column.label} {this.renderSortIcon(column)}
            </th>
          ))}
        </tr>
      </thead>
    );
  }
}

export default TableHeader;

这是列数组

columns = [
    { path: "title", label: "Title" },
    { path: "genre.name", label: "Genre" },
    { path: "numberInStock", label: "Stock" },
    { path: "dailyRentalRate", label: "Rate" },
    {
      
      key: "like",
      content: movie => (
        <Like liked={movie.liked} onClick={() => this.props.onLike(movie)} />
      )
    },
    {
      key: "delete",
      content: movie => (
        <button
          onClick={() => this.props.onDelete(movie)}
          className="btn btn-danger btn-sm"
        >
          Delete
        </button>
      )
    }
  ];

Answer 1

我看到您的路径被渲染了两次，我担心如果第一个渲染未定义，那么它将返回错误。

要解决此错误，您可以将其添加到函数中：

renderSortIcon = column => {
  
  const {sortColumn} = this.props

if (column?.path !== sortColumn?.path) return null;
if (sortColumn?.order === "asc") return <i className="fa fa-sort-asc" />;
return <i className="fa fa-sort-desc" />;
};

Answer 2

也许该路径尚不可用。尝试先检查它是否存在：

column.path ? column.path : 'something else if path is not there'

Answer 3

我尝试了您的操作，但它在两个“喜欢”和“删除”按钮上显示了图标，但我想显示此信息以细化种类和库存

在React中添加排序图标

3 个答案: