如何從全局訪問React組件的狀態？

Question

我沒有使用Redux或Flux或任何框架。 我有一個React組件，我想重複使用多個頁面。

它有一個狀態來控制它的可見性。

如何進入組件並從標準HTML按鈕觸發狀態？

大多數答案都指向Redux/Flux/MobX，但它們是用於SPA的，但是我的平板頁面沒有框架安裝React組件。

Answer 1

假設您的standard HTML Button未在React Component內呈現，您可以從React組件監聽HTML元素的事件。假設我們在HTML文件中有靜按鈕：

<button id="buttonA">Toggle Visibility</button> 

裏面我們的陣營組成部分，我們可以聽單擊事件，此元素和更新我們的狀態設置的瀏覽權限：

componentDidMount() { 
    // here we are listening our hard-coded static HTML Element's click event 
    // And update our state based on this. 
    document.getElementById('buttonA').addEventListener("click", e => { 
     this.setState({hidden: !this.state.hidden}) 
    }) 
    } 

這裏是一個working example on CodePen 。你可以玩它。