javascript - 如何通过React和鼠标事件传播实现可重用组件？

Question

考虑以下典型的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具有几乎相同的代码，除了类名和控制台日志语句。

现在，如果您要运行此应用程序，并且用户单击内部可点击区域，则会发生以下情况(按预期):

外围区域注册鼠标事件处理程序

内部区域注册鼠标事件处理程序

用户在内部区域

中按下鼠标

内部区域的mouseDown侦听器触发

外围区域的mouseDown侦听器触发

用户释放鼠标向上

内部区域的mouseUp侦听器触发

控制台记录“内部区域单击”

外围区域的mouseUp侦听器触发

控制台记录“外部单击”

这显示了典型的事件冒泡/传播-到目前为止没有任何惊喜。

它将输出:

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)

外围区域注册鼠标事件处理程序

内部区域注册鼠标事件处理程序

用户在内部区域

中按下鼠标

内部区域的mouseDown侦听器触发

内部区域的onClicking被触发

容器运行'setInteractionBusy'操作

redux应用程序状态interactionBusy设置为true

外围区域的mouseDown侦听器触发(它的clickable属性仍然是true，因为即使应用程序状态interactionBusy是true，react仍未导致重新渲染；渲染操作位于Javascript事件循环的末尾)

用户释放鼠标向上

内部区域的mouseUp侦听器触发

控制台记录“内部区域单击”

外围区域的mouseUp侦听器触发

控制台记录“外部单击”

react重新渲染Component.jsx并将clickable作为false传递给两个组件，但是现在

为时已晚

这将输出:

inner area click
outer area click

而所需的输出是:

inner area click

因此，应用程序状态无助于使这些组件更加独立和可重用。原因似乎是，即使状态已更新，容器也只会在事件循环结束时重新渲染，并且鼠标事件传播触发器已在事件循环中排队。

因此，我的问题是:是否可以使用声明状态的应用状态来替代使用鼠标状态传播的应用状态，还是可以通过应用(redux)状态来实现/执行上述设置？ ？

Answer 1

最简单的替代方法是在触发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>