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

【问题标题】：Is it possible in react to pass state/props value from one component to another是否有可能将状态/道具值从一个组件传递到另一个组件
【发布时间】：2019-08-08 19:02:47
【问题描述】：

我有一个组件，我想从其中将数据传递给另一个组件，并且我使用 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。我需要访问我在康复组件内的活动组件中拥有的状态变量。

我知道将“windows.entity”用作全局存储，但我认为这不是一个好习惯。

任何帮助表示赞赏。在此先感谢

【问题讨论】：

我不清楚问题是什么。为什么不能只传递道具？不相关，但我发现你的很多 JSX 都很难阅读。
您可以使用 React.context 之类的东西将组件层次结构包装到共享上下文中 (reactjs.org/docs/context.html)
如果你有两个兄弟组件，一种典型的数据共享解决方案是将状态放入两个兄弟组件之上的组件中。您可以将一个函数传递给其中一个用于设置父级的状态，另一个可以从父级接收值。
只用道具？
兄弟组件通过父组件通信的小例子：codesandbox.io/s/mz1yonj468

标签： reactjs react-router-dom

【解决方案1】：

您可以从 Activity 传递一个函数作为 Rehab 的道具。 Rehab 可以调用此函数来对 Activity 执行状态更改，进而更新 Rehab 的 props。

编辑：

因为我看到你 Rehab 不是 Activity 的孩子 - 你可以做同样的事情只有 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)

【讨论】：

谢谢，它有帮助。即使是 Jamie Dixon 的评论也有帮助。