reactjs - 通过 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课堂上我需要更改globalState，最好的方法是什么？

谢谢

Answer 1

道具是只读的（请参阅此处的文档）。所以，你要么：

1. 将 globalstate 实现为Dashboard组件中的状态，然后将处理程序传递给 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>
  }

}

2. 使用像redux或Flux这样的状态管理库。使用这些库，您可以保留应用程序的整个状态，并使它们可以在您的任何组件中访问。这可能是最好的选择，许多人使用这些库来管理他们的应用程序的状态。

3. 您可以将 globalState 存储在localStorage或window全局变量中。可能不是一个好主意，但仍然可能。