Question

我遵循了React的文档，了解如何在Web组件（https://reactjs.org/docs/web-components.html）中使用React，但是发现综合事件系统不适用于该React组件内部的React树。

Here is a JS Fiddle，您可以在其中尝试：

无需Web组件自然嵌入的React组件
嵌入在Web组件内部的相同React组件（事件不会触发）
另一个React组件，它在Web组件内部手动附加事件侦听器

class CounterWithSyntheticEvents extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        };
    }

    handleClick() {
        this.setState(prevState => ({ counter: prevState.counter + 1 }));
    }

    render() {
        return (
            <div>
                Count {this.state.counter} <button onClick={this.handleClick.bind(this)}>+</button>
            </div>
        );
    }
}
class CounterWithDOMEvents extends React.Component {
    constructor(props) {
        super(props);
        this.buttonRef = React.createRef();
        this.state = {
            counter: 0,
        };
    }

    componentDidMount() {
        const listenerFn = this.handleClick.bind(this);
        this.buttonRef.current.addEventListener("click", listenerFn);
      this.removeListener = () => this.buttonRef.current.removeEventListener('click', listenerFn);
    }

    componentWillUnmount() {
        this.removeListener();
    }

    handleClick() {
        this.setState(prevState => ({ counter: prevState.counter + 1 }));
    }

    render() {
        return (
            <div>
                Count {this.state.counter} <button ref={this.buttonRef}>+</button>
            </div>
        );
    }
}

ReactDOM.render(<CounterWithSyntheticEvents />, document.getElementById("container"));

class ReactSyntheticEvents extends HTMLElement {
    connectedCallback() {
        const mountPoint = document.createElement("div");

        const shadow = this.attachShadow({ mode: "open" });
        shadow.appendChild(mountPoint);
        ReactDOM.render(<CounterWithSyntheticEvents />, mountPoint);
    }
}
customElements.define("react-synthetic-events", ReactSyntheticEvents);

class ReactDOMEvents extends HTMLElement {
    connectedCallback() {
        const mountPoint = document.createElement("div");

        const shadow = this.attachShadow({ mode: "open" });
        shadow.appendChild(mountPoint);
        ReactDOM.render(<CounterWithDOMEvents />, mountPoint);
    }
}

customElements.define("react-dom-events", ReactDOMEvents);

<div id="container"></div>
<react-synthetic-events ></react-synthetic-events>
<react-dom-events ></react-dom-events>

使用手动侦听器绑定的方法行得通，但是我想避免重写将要集成的每个单独的React组件。

有人知道我可以做的快速修复，以便将事件传播到组件吗？（使小提琴的第二种情况起作用）

我听说过Polymer-react，但还没有尝试过。而且，我尽可能不引入其他层。

Answer 1

根据React文档。

Web组件发出的事件可能无法通过React渲染树正确传播。您将需要手动附加事件处理程序以在React组件中处理这些事件。

所以答案是，您只能自己附加事件监听器。

Answer 2

我花了一些时间尝试查找修复程序或解决方法，结果如下：

已识别错误，并已达成解决方案：React应该允许多个侦听器根，应该是“容器”而不是仅文档：https://github.com/facebook/react/issues/2043。至少进行了一次以上的尝试来解决此问题，但是经过两年多的使用，https://github.com/facebook/react/issues/2043#issuecomment-346039823似乎最终没有解决。除非我们做出贡献，否则这似乎不会得到解决，否则Facebook将开始研究Web组件！
有关StackOverflow（Click event not firing when React Component in a Shadow DOM）的某些活动导致了变通方法（https://www.npmjs.com/package/react-shadow-dom-retarget-events）的实施。技术实现可以概括为在Web组件影子根级别复制React的事件处理系统的试验，但实际上可以简化。当我在某种形式的用例上尝试它时，它适用于某些UI组件（复选框，文本字段），但不适用于某些其他组件（切换）。对于切换（来自Material UI），我得到了两个事件，而不是一个。无论如何，我发现尝试用几行代码来复制React的偶数系统并不是一个可靠的解决方法。
最后，我发现了一些库，声称它们使Web组件更容易使用React，但是它们实际上是在处理Web组件的“表面”而不是其内部，因此无法解决问题。我尝试了https://github.com/skatejs/val和https://www.npmjs.com/package/web-react-components。我发现后者是最有趣的（简单明了）。

最后，作为结论，我们决定使用不带Shadow-DOM功能的Web组件。

反应综合事件在Web组件中不起作用

2 个答案: