React中通过Props传递的方法无法触发问题排查

嘿，我来帮你梳理下可能遗漏的点，大概率是这几个环节没处理到位：

1. 未将方法传递给子组件Thumbnail #

你在App.js里把escolheTextura传给了ThumbnailGroup，但如果ThumbnailGroup在遍历生成Thumbnail的时候，没有把这个方法继续传递给每个Thumbnail的onClick属性，那点击自然不会触发。

比如你的ThumbnailGroup.js应该补充传递逻辑：

const ThumbnailGroup = (props) => {
  return (
    <div className={["column", "group"].join(' ')}>
      {/* 遍历texturas数组时，给每个Thumbnail绑定onClick */}
      {props.texturas.map((textura, index) => (
        <Thumbnail 
          key={index} 
          onClick={props.escolheTextura} 
          // 其他需要传递的属性，比如textura的图片地址等
        />
      ))}
    </div>
  );
};

2. Thumbnail组件未绑定onClick到DOM元素 #

就算Thumbnail拿到了onClick方法，如果没有把它绑定到实际可点击的DOM元素（比如div、img）上，点击也不会触发。

比如你的Thumbnail组件应该这样写：

const Thumbnail = (props) => {
  return (
    {/* 把onClick绑定到外层容器或图片元素上 */}
    <div className="thumbnail-item" onClick={props.onClick}>
      <img src={props.imageUrl} alt="纹理缩略图" />
    </div>
  );
};

额外检查：this绑定问题（你的情况大概率不存在，但可以参考） #

如果escolheTextura是普通类方法而非箭头函数，会存在this丢失的问题，但你已经用了箭头函数escolheTextura = () => { ... }，所以这个问题已经被避免了，不用额外处理。

只要补全上面两个传递环节，点击Thumbnail时应该就能触发console.log('hello')啦～

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