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”用作全局存储，但是我认为这不是一个好习惯。

我们将尽力帮助您。

Answer 1

您可以传递Activity中的一个功能作为康复的道具。 Rehab可以调用此功能，以对Activity进行状态更改，从而更改Rehab的道具。

编辑：

自从我看到您之后，Rehab并不是Activity的子代-您可以做同样的事情，只有App是拥有该功能的顶层组件。然后状态会更新，并作为道具传递给“活动”和“康复”，并相应进行更新。

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)

是否有可能将状态/道具值从一个组件传递到另一个组件

1 个答案: