Можно ли в ответ на передачу значения состояния / реквизита от одного компонента к другому

Question

У меня есть компонент, из которого я хочу передать данные другому компоненту, и я использовал маршрутизацию-router-dom.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      devices: [],
      data_set: []
    }
  }
  render() {
    return (
      <Provider store={store}>
        <Fragment>
          <BrowserRouter>
            <Switch>
              <Route
                exact
                path="/"
                component={Dashboard} />

              <Route
                exact
                path="/rehab"
                render={(props) =>
                <Rehab {...props}
                  data_val={this.state.data_set}
                  text="Shyam Form" />
                }
              />

              <Route
                exact
                path="/activity"
                render={(props) =>
                <Activity {...props}
                  data_val={this.state.data_set}
                  text="Shyam Activity" />
                }
              />
            </Switch>
          </BrowserRouter>
        </Fragment>
      </Provider>
    )
  }
}
const wrapper = document.getElementById("app");
ReactDOM.render( < App / > , wrapper)
`

Это мой App.js.Что мне нужно для доступа к переменной состояния, которая есть в моем компоненте Activity внутри компонента Rehab.

Мне известно об использовании «windows.entity» в качестве глобального хранилища, но это не будет хорошей практикой.Предположим.

Любая помощь приветствуется. Заранее спасибо

Answer 1

Вы можете передать функцию из Activity как опору для реабилитации. Эта функция может вызываться Rehab для изменения состояния Activity, что, в свою очередь, обновит реквизиты Rehab.

Edit:

Поскольку я вижу вас, Реабилитационный центр не является потомком Деятельности - вы можете делать то же самое, только приложение - это компонент верхнего уровня, который содержит функцию. Затем состояние обновляется и передается как реквизиты в Activity и Rehab, которые обновляются соответственно.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      devices: [],
      data_set: []
    }
  }

  someFunction = (argument)=>{
     this.setState(()=({argument}));
  }

  render() {
    return ( <
      Provider store = {
        store
      } >
      <
      Fragment >
      <
      BrowserRouter >
      <
      Switch >
      <
      Route exact path = "/"
      component = {
        Dashboard
      }
      />

      <
      Route exact path = "/rehab"
      render = {
        (props) => < Rehab { ...props
        }
        data_val = {
          this.state.data_set
        }
        someFunction={this.someFunction}
        text = "Shyam Form" / >
      }
      />

      <
      Route exact path = "/activity"
      render = {
        (props) => < Activity { ...props
        }
        data_val = {
          this.state.data_set
        }
        someFunction={this.someFunction}
        text = "Shyam Activity" / >
      }
      /> <
      /Switch> <
      /BrowserRouter> <
      /Fragment> <
      /Provider>
    )
  }
}
const wrapper = document.getElementById("app");
ReactDOM.render( < App / > , wrapper)