通过 props 反应全局状态

Question

我使用共享的全局状态如下：

interface DashboardProps extends React.Props<Dashboard> {
    globalState? : GlobalState
}

export class Dashboard extends React.Component<DashboardProps, any>{

}

在AppLayout中我称它为：

<Route  path='/dashboard'>
   <Dashboard globalState={this.state} />
</Route>

假设在 Dashboard class 中，我需要更改 globalState，最好的方法是什么？

谢谢

Answer 1

道具是只读的（参见文档 here）。所以，你要么：

在您的 Dashboard 组件中将 globalstate 实现为一个状态，然后将处理程序传递给 Dashboard 的子级，以便他们可以更改 globalState。例如：

// dashboard component
class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      globalState = /* some initial value */
    }
  }

  // handler to change globalState.
  globalStateHandler = (data) => {
    // perhaps some processing...
    this.setState({ 
      globalState: data,
    })
  }
  
  render() {
    return <ChildComponentOne>
      <ChildComponentTwo>
        <SomeComponentOne globalStateHandler={this.globalStateHandler}/>
        <SomeComponentOne globalStateHandler={this.globalStateHandler}/>
      </ChildComponentTwo>
    </ChildComponentOne>
  }

}

使用像 redux, or flux 这样的状态管理库。使用这些库，您可以保持应用程序的完整状态，并使它们可以在您的任何组件中访问。这可能是最好的选择，许多人已经使用这些库来管理他们应用程序的状态。
您可以将 globalState 存储在 localStorage 或 window 全局变量中。可能不是一个好主意，但仍然有可能。

通过 props 反应全局状态

React global state via props

global-state

typescript

reactjs