类静态数组调用类方法问题：传递onClickItem至Card组件时this未定义

首先得明确为啥静态数组里的this是undefined：静态属性是属于类本身的，不是组件实例的。当你在静态数组里写this时，它指向的是类，而你的onClickItem是实例方法（属于每个组件实例），所以类根本拿不到这个方法，自然就undefined了。

下面给你两种符合需求的方案，既能传递点击函数，又不用把数组放render里反复初始化：

方案一：把数组改成组件实例属性（最推荐） #

直接把数组定义成类的实例属性（而非静态属性），这样数组只会在组件实例化的时候创建一次，不会每次渲染都重新生成，而且this能正确指向组件实例，拿到onClickItem方法。

用类字段语法写的话会很简洁：

class YourComponent extends React.Component {
  // 初始化state
  state = { activeCardId: null };

  // 用箭头函数自动绑定this，不用手动bind
  onClickItem = (cardId) => {
    this.setState({ activeCardId: cardId });
  };

  // 实例属性：只在组件创建时初始化一次
  cardData = [
    { id: 1, component: <Card key={1} onClick={() => this.onClickItem(1)} /> },
    { id: 2, component: <Card key={2} onClick={() => this.onClickItem(2)} /> },
    // 其他卡片项
  ];

  render() {
    return <div>{this.cardData.map(item => item.component)}</div>;
  }
}

如果你的onClickItem需要接收卡片的具体参数，直接在箭头函数里传就行，这样每个Card的点击回调都能正确触发实例的state更新。

方案二：静态数组存配置+工厂函数（适合复用配置场景） #

如果你一定要保留静态数组（比如这个配置需要在其他地方复用），可以把数组里的组件换成工厂函数，在render时调用函数并传入实例的onClickItem。这样静态数组本身只会初始化一次，只是在渲染时动态生成组件：

class YourComponent extends React.Component {
  state = { activeCardId: null };

  // 静态配置数组：只初始化一次
  static cardConfigs = [
    { id: 1, label: "卡片1" },
    { id: 2, label: "卡片2" },
    // 只存卡片的静态配置，不直接写组件
  ];

  onClickItem = (cardId) => {
    this.setState({ activeCardId: cardId });
  };

  render() {
    return (
      <div>
        {YourComponent.cardConfigs.map(config => (
          <Card
            key={config.id}
            label={config.label}
            onClick={() => this.onClickItem(config.id)}
          />
        ))}
      </div>
    );
  }
}

这种方式把静态配置和组件渲染分开，静态数组不会随渲染重复创建，同时能正确传递点击函数。

注意点 #

不管用哪种方案，map渲染组件时一定要加唯一的key属性，帮助React识别组件身份，避免不必要的重渲染。

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