React：如果反应应用程序之外的东西发生变化，如何改变状态？

Question

备注：这不是Change the state when clicking outside a component in React的重复 我不想处理 mousedown/mouseup 事件。

我想“从外部”更改组件的状态。因此，组件将等到 HTML 代码执行一些操作 id（按钮单击）。 单击可以更改 DOM 中的某些内容，但是有没有办法（另一种方法是监视 buttondown 事件）来检测更改？

结果会是这样的：

<div id="root">
... the component will be rendered here, hidden at the beginning
</div>

<button onClick=....>Show the Component</button>

Answer 1

您至少有两个选择：

1. 使用portal，将按钮移动到 React 树中，即使它位于 DOM 的其他位置，也可以在其他位置呈现您想要的组件。但如果你想将按钮完全保留在 React 之外，则此选项不适用。

2. 如果您想将 button 完全留在 React 之外，请在您要渲染/不渲染的组件周围使用父组件，并让该父组件监听按钮元素的点击。在componentDidMount 或useEffect 没有依赖关系的钩子中连接该点击处理程序，并在componentWillUnmount 或从useEffect 返回的清理回调中删除它。

3. 或者从另一边驱动它，使用非React代码钩住点击，然后通过ReactDOM.render将组件直接安装在id="root"上来响应点击。

这里是#2的一个例子：

const {useState, useEffect} = React;

const TheComponent = () => {
    return <div>This is the component</div>;
};

const Example = () => {
    const [showing, setShowing] = useState(false);
    useEffect(
        () => {
            const clickHandler = () => {
                setShowing(flag => !flag);
            };
            console.log("Hooking click on button");
            document.getElementById("the-button").addEventListener("click", clickHandler);
            // return cleanup handler:
            return () => {
                console.log("Unhooking click on button");
                document.getElementById("the-button").removeEventListener("click", clickHandler);
            };
        },
        [] // <== No deps = mount/unmount only
    );
    return (
        <div>
            {showing && <TheComponent />}
        </div>
    );
};

const App = () => {
    const [mounted, setMounted] = useState(true);
    return (
        <div>
            {mounted && <Example />}
            <div>
                <input type="button" value="Unmount the parent component entirely" onClick={() => setMounted(false)} />
            </div>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

<div>React <code>id="root"</code>:</div>
<div id="root"></div>

<div style="margin-top: 10px">Outside of React:</div>
<input type="button" id="the-button" value="Toggle">

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

这里是#3的一个例子：

const {useState, useEffect} = React;

const TheComponent = () => {
    return <div>This is the component</div>;
};

const root = document.getElementById("root");
let mounted = false;
document.getElementById("the-button").addEventListener("click", () => {
    if (mounted) {
        ReactDOM.unmountComponentAtNode(root);
    } else {
        ReactDOM.render(<TheComponent />, root);
    }
    mounted = !mounted;
});

<div>React <code>id="root"</code>:</div>
<div id="root"></div>

<div style="margin-top: 10px">Outside of React:</div>
<input type="button" id="the-button" value="Toggle">

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>