Question

我没有使用Redux或Flux或任何框架。我有一个React组件，我想重用多个页面。

它有一个控制它的可见性的状态。

如何进入组件，并从标准HTML按钮触发状态？

大多数答案指向Redux / Flux / MobX，但它们用于SPA，但我的是一个普通页面，没有框架安装React组件。

Answer 1

假设您的standard HTML Button未在React Component内呈现，您可以从React Components侦听HTML Elements的事件。假设我们的HTML文件中有静态按钮：

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

在我们的React组件中，我们可以监听此元素的click事件并更新我们的状态以设置可见性：

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。你可以玩它。

如何从全局访问React组件的状态？

1 个答案: