Реагировать на глобальное состояние с помощью реквизита

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 глобальная переменная. Вероятно, не очень хорошая идея, но, тем не менее, возможно.