考虑以下典型的React文档结构:
Component.jsx
<OuterClickableArea>
<InnerClickableArea>
content
</InnerClickableArea>
</OuterClickableArea>
这些组件的组成如下:
OuterClickableArea.js
export default class OuterClickableArea extends React.Component {
constructor(props) {
super(props)
this.state = {
clicking: false
}
this.onMouseDown = this.onMouseDown.bind(this)
this.onMouseUp = this.onMouseUp.bind(this)
}
onMouseDown() {
if (!this.state.clicking) {
this.setState({ clicking: true })
}
}
onMouseUp() {
if (this.state.clicking) {
this.setState({ clicking: false })
this.props.onClick && this.props.onClick.apply(this, arguments)
console.log('outer area click')
}
}
render() {
return (
<div
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
>
{ this.props.children }
</div>
)
}
}
出于这个原因，InnerClickableArea.js具有几乎相同的代码，除了类名和控制台日志语句。
现在，如果您要运行此应用程序，并且用户单击内部可点击区域，则会发生以下情况(按预期):
这显示了典型的事件冒泡/传播-到目前为止没有任何惊喜。
它将输出:
inner area click
outer area click
现在，如果我们正在创建一个应用程序，一次只能进行一次交互，该怎么办？例如，假设有一个编辑器，可以在其中单击鼠标来选择元素。在内部区域中按下时，我们只希望选择内部元素。
一个简单而明显的解决方案是在InnerArea组件内部添加一个stopPropagation:
InnerClickableArea.js
onMouseDown(e) {
if (!this.state.clicking) {
e.stopPropagation()
this.setState({ clicking: true })
}
}
这按预期工作。它将输出:
inner area click
有问题吗？
InnerClickableArea在此隐式选择OuterClickableArea(及所有其他父项)以使其不能够接收事件。即使InnerClickableArea不应该知道OuterClickableArea的存在。就像OuterClickableArea并不了解InnerClickableArea(遵循关注点和可重用性概念的分离)。我们在这两个组件之间创建了一个隐式依赖关系，其中OuterClickableArea“知道”它不会错误地触发其侦听器，因为它“记住” InnerClickableArea将停止任何事件传播。这似乎是错误的。我尝试不使用stopPropagation来提高应用程序的可伸缩性，因为添加依赖事件的新功能会更容易，而不必记住哪个组件在何时使用
stopPropagation。相反，我想使上述逻辑更具说明性，例如通过在
Component.jsx内声明性地定义每个区域当前是否可单击。我将使它成为应用程序状态感知器，传递区域是否可单击，并将其重命名为Container.jsx。像这样:Container.jsx
<OuterClickableArea
clickable={!this.state.interactionBusy}
onClicking={this.props.setInteractionBusy.bind(this, true)} />
<InnerClickableArea
clickable={!this.state.interactionBusy}
onClicking={this.props.setInteractionBusy.bind(this, true)} />
content
</InnerClickableArea>
</OuterClickableArea>
其中
this.props.setInteractionBusy是一个Redux Action ，它将导致应用状态被更新。另外，此容器会将应用程序状态映射到其 Prop (上面未显示)，因此将定义this.state.ineractionBusy。OuterClickableArea.js(与InnerClickableArea.js几乎相同)
export default class OuterClickableArea extends React.Component {
constructor(props) {
super(props)
this.state = {
clicking: false
}
this.onMouseDown = this.onMouseDown.bind(this)
this.onMouseUp = this.onMouseUp.bind(this)
}
onMouseDown() {
if (this.props.clickable && !this.state.clicking) {
this.setState({ clicking: true })
this.props.onClicking && this.props.onClicking.apply(this, arguments)
}
}
onMouseUp() {
if (this.state.clicking) {
this.setState({ clicking: false })
this.props.onClick && this.props.onClick.apply(this, arguments)
console.log('outer area click')
}
}
render() {
return (
<div
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
>
{ this.props.children }
</div>
)
}
}
问题在于Javascript事件循环似乎按以下顺序运行这些操作:
OuterClickableArea和InnerClickableArea都是用等于clickable的prop true创建的(因为应用程序状态交互忙状态默认为false)interactionBusy设置为true clickable属性仍然是true，因为即使应用程序状态interactionBusy是true，react仍未导致重新渲染；渲染操作位于Javascript事件循环的末尾)Component.jsx并将clickable作为false传递给两个组件，但是现在这将输出:
inner area click
outer area click
而所需的输出是:
inner area click
因此，应用程序状态无助于使这些组件更加独立和可重用。原因似乎是，即使状态已更新，容器也只会在事件循环结束时重新渲染，并且鼠标事件传播触发器已在事件循环中排队。
因此，我的问题是:是否可以使用声明状态的应用状态来替代使用鼠标状态传播的应用状态，还是可以通过应用(redux)状态来实现/执行上述设置？ ？
最佳答案
最简单的替代方法是在触发stopPropogation之前添加一个标志，这种情况下该标志是一个参数。
const onMouseDown = (stopPropagation) => {
stopPropagation && event.stopPropagation();
}
现在，即使是应用程序状态或 Prop 也可以决定触发停止传播
<div onMouseDown={this.onMouseDown(this.state.stopPropagation)} onMouseUp={this.onMouseUp(this.props.stopPropagation)} >
<InnerComponent stopPropagation = {true}>
</div>
关于javascript - 如何通过React和鼠标事件传播实现可重用组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50298440/