React嵌套组件触摸事件停止传播不起作用/事件冒泡

Question

我有一个父组件，它具有基于向上和向下滑动切换的部分。有一个子容器，如果内容溢出，需要滚动内容。鼠标轮事件将同时触发父项和子项，如果子组件在视图中，它将仅滚动内容，并且事件将不会传播到父项以在段之间切换。但这同样适用于触控设备。

下图是包含一个父项（即一个部分）的页面，其中向上或向下滑动将加载不同的部分。

下图是子组件，单击上面的任何列表项时会切换。这里的滚动效果非常适合桌面鼠标和笔记本电脑触摸板。但是当我们使用移动设备时，滚动会切换父节而不是滚动内容。

我已尝试在子组件滚动容器上触发事件的事件停止传播。

我们可以在子组件渲染方法中看到如下代码：

<BodyContent onWheel={this.stopPropagation}
                            onTouchEnd={this.stopPropagation}
                            onTouchMove={this.stopPropagation}
                            onTouchStart={this.stopPropagation}>
                            <BodyHeader>
                                {content.title}
                            </BodyHeader>
                            <div dangerouslySetInnerHTML={{ __html: 
                                  content.mainText }} />
                        </BodyContent>

以下代码是子组件类中的函数。

stopPropagation(event) {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    return false;
}

抱歉，我无法按照指南复制所有代码。 任何快速帮助表示赞赏，并提前致谢。