React中点击列表项时如何传递参数？

我来给你梳理几个实用的方案，解决你遇到的「在列表项中传递参数，同时避免因箭头函数/bind导致不必要重渲染」的问题：

1. 拆分独立子组件（最推荐） #

把列表中的每个项抽成单独的子组件，让子组件自己处理点击逻辑，父组件只传递必要的props。这种方式既能避免每次渲染创建新函数，还能通过PureComponent/React.memo来控制子组件的重渲染。

类组件示例： #

// 子组件：TableHeader.js
class TableHeader extends React.PureComponent {
  // 实例方法，不会每次渲染创建新函数
  handleClick = () => {
    this.props.handleSort(this.props.column);
  };

  render() {
    return <th onClick={this.handleClick}>{this.props.column}</th>;
  }
}

// 父组件中使用
class ParentComponent extends React.Component {
  // 预先绑定好排序方法，避免每次渲染创建新函数
  handleSort = (column) => {
    // 你的排序逻辑
    console.log(`排序列：${column}`);
  };

  render() {
    const { someList } = this.props;
    return (
      <thead>
        {someList.map((column) => (
          <TableHeader 
            key={column} 
            column={column} 
            handleSort={this.handleSort} 
          />
        ))}
      </thead>
    );
  }
}

函数组件示例（用React.memo）： #

// 子组件
const TableHeader = React.memo(({ column, handleSort }) => {
  const handleClick = () => {
    handleSort(column);
  };

  return <th onClick={handleClick}>{column}</th>;
});

// 父组件
const ParentComponent = ({ someList }) => {
  // 用useCallback缓存排序方法，避免每次渲染创建新函数
  const handleSort = useCallback((column) => {
    console.log(`排序列：${column}`);
  }, []);

  return (
    <thead>
      {someList.map((column) => (
        <TableHeader 
          key={column} 
          column={column} 
          handleSort={handleSort} 
        />
      ))}
    </thead>
  );
};

这种方式的核心是：子组件通过PureComponent/React.memo浅比较props，只要column和handleSort不变，子组件就不会重渲染；同时子组件的点击方法是固定的实例/组件内方法，不会每次渲染生成新函数。

2. 用缓存生成函数数组（适合不拆分子组件的场景） #

如果不想拆分子组件，可以用useMemo（函数组件）或componentDidUpdate（类组件）来提前生成绑定好参数的函数数组，只有当依赖项变化时才重新生成。

函数组件示例： #

const ParentComponent = ({ someList }) => {
  const handleSort = useCallback((column) => {
    console.log(`排序列：${column}`);
  }, []);

  // 缓存函数数组，只有someList或handleSort变化时才更新
  const clickHandlers = useMemo(() => {
    return someList.map(column => () => handleSort(column));
  }, [someList, handleSort]);

  return (
    <thead>
      {someList.map((column, index) => (
        <th key={column} onClick={clickHandlers[index]}>{column}</th>
      ))}
    </thead>
  );
};

类组件示例： #

class ParentComponent extends React.Component {
  state = {
    clickHandlers: []
  };

  handleSort = (column) => {
    console.log(`排序列：${column}`);
  };

  componentDidMount() {
    this.updateHandlers();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.someList !== this.props.someList) {
      this.updateHandlers();
    }
  }

  updateHandlers = () => {
    const handlers = this.props.someList.map(column => () => this.handleSort(column));
    this.setState({ clickHandlers: handlers });
  };

  render() {
    const { someList } = this.props;
    const { clickHandlers } = this.state;
    return (
      <thead>
        {someList.map((column, index) => (
          <th key={column} onClick={clickHandlers[index]}>{column}</th>
        ))}
      </thead>
    );
  }
}

3. 利用DOM/组件属性获取参数（Web更友好，RN需调整） #

在Web环境中，可以通过HTML的data-*属性存储参数，点击时从事件对象中获取；React Native中虽然没有dataset，但可以通过组件的自定义属性或直接从事件源的props中读取。

Web示例： #

class ParentComponent extends React.Component {
  handleSort = (e) => {
    // 从事件目标的data属性中获取列名
    const column = e.currentTarget.dataset.column;
    console.log(`排序列：${column}`);
  };

  render() {
    const { someList } = this.props;
    return (
      <thead>
        {someList.map((column) => (
          <th 
            key={column} 
            data-column={column} 
            onClick={this.handleSort}
          >
            {column}
          </th>
        ))}
      </thead>
    );
  }
}

React Native调整方案： #

如果是React Native的Touchable组件，可以把参数作为组件的一个自定义props，点击时通过组件自身的props获取，同时用React.memo包裹子组件避免重渲染：

// RN子组件
const TouchableHeader = ({ column, handleSort }) => {
  return (
    <TouchableOpacity onPress={() => handleSort(column)}>
      <Text>{column}</Text>
    </TouchableOpacity>
  );
};
// 父组件中用React.memo包裹子组件
const MemoizedHeader = React.memo(TouchableHeader);

关于你提到的constructor绑定的疑问 #

你说的在constructor中预先绑定函数，只适合静态数据的场景。如果列表数据来自props，constructor只会在组件初始化时执行一次，当props更新时，原来绑定的函数参数还是旧的，无法同步新的props数据，所以这种方式不适用动态变化的列表。

内容的提问来源于stack exchange，提问作者eugene