是否有可能将 state/props 值从一个组件传递到另一个组件

Question

我有一个组件，我想从那里将数据传递给另一个组件，我已经使用 react-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。我需要访问 Rehab 组件内 Activity 组件中的状态变量。

我知道使用 "windows.entity" 作为全局存储，但我认为这不是一个好的做法。

任何帮助都是appreciated.Thanks提前

Answer 1

您可以从 Activity 传递一个函数作为 Rehab 的道具。 Rehab 可以调用此函数，以便在 Activity 上执行状态更改，这将依次更新 Rehab 的道具。

编辑：

因为我看到你 Rehab 不是 Activity 的 child - 你可以做同样的事情，只有 App 是拥有该功能的顶级组件。然后更新状态并将其作为道具传递给 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)

是否有可能将 state/props 值从一个组件传递到另一个组件

Is it possible in react to pass state/props value from one component to another

reactjs

react-router-dom