我正在尝试使用React、Redux构建一个嵌套的简单页面。底层问题并不是由于Redux/connect引起的，因为如果我尝试操作代码，我可以成功调度操作。
我的问题是，当我点击图片（甚至按钮）时，并没有看到任何事件被触发。
渲染 孙子组件的方法：
<Fragment>
<div key={blog.id} className='mb-1 mt-1'>
<img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15"
onClick={this.props.onPrefClick} />
</div>
</Fragment>
我是React和Redux的新手，尝试了很多在网上找到的解决方案，但是在我的情况下似乎没有什么能够解决问题，现在我被卡住了。
我的组件如下：
<Dashboard\>
<BlogList\>
博客列表（父组件）:
<div>
{ this.props.blogs.map(this.renderBlogItem) }
</div>
updatePreference = (blog) => {
console.log('1 Blog List this.updatePreference: clicked ');
}
renderBlogItem = blog => {
return <BlogItem key={'m0' + blog.id} onBlogClick={() => this.updatePreference(blog)} />;
}
博客项（直接子组件）
//this has some JSX static code and below child component
<PreferenceItem key={blog.id} onPrefClick={() => this.props.onBlogClick} />
偏好项（子组件的子组件）
//this has some JSX static code and below image with onClick
<div key={blog.id} className='mb-1 mt-1'>
<img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15" onClick={this.props.onPrefClick}/>
我原本希望这是一个简单的事件流程，但是有些地方出了问题。我将其简化并更改了所有三个组件中的点击函数，改为箭头函数(=>)和其他选项，但无论何时我点击图片，
onClick都没有被触发(当我在代码中进行操作时，在孙子组件中使用绑定(与在同一类中定义的函数)，它触发了事件，但在页面加载期间不应该这样)。所以这里有些不对劲。
这里有一个示例工作的代码，其中有一个嵌套的子级。
我主要遵循官方文档reactjs、react-redux和一些来自freecodecamp.org的参考资料。
还有一个问题
我现在无法粘贴图像 - Chrome 调试工具显示图像元素的 EventListener 的处理程序指向 noop 函数，而 FunctionLocation 是未知的 （为什么是 noop？这反映了我的绑定不正确，但我无法修复它）
如果我查看孙子的属性，它指向 onPrefClick
请也指导我如何调试以找到根本原因？
元素是
组件现在引用 onBlogClick
