グローバルからReactコンポーネントの状態にアクセスするにはどうすればよいですか？

Question

私は、ReduxやFluxやそのフレームワークを使用していません。 複数のページで再利用したいReactコンポーネントがあります。

これは視認性を制御する状態があります。

コンポーネントに手を加えて、標準のHTMLボタンから状態をトリガするにはどうすればよいですか？

ほとんどの回答はRedux/Flux/MobXを指していますが、SPA用ですが、Reineコンポーネントを搭載したフレームワークのないプレーンページです。

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です。あなたはそれで遊ぶことができます。