反应通过开关元素向下传递道具答案

【问题标题】：React passing props down through switch element反应通过开关元素向下传递道具
【发布时间】：2019-10-30 08:47:25
【问题描述】：

我在通过 React 元素（如 Switch 和 Route）传递道具时遇到问题。在下面的示例中，我想将 Dashboard 组件的所有道具传递给 Account 组件。有没有办法做到这一点？

App.js

  <Dashboard>
    <Switch>
      // Dashboard props to Account component
      <Route path="/account" render={props => <Account {...props} /> } exact />
      <Route path="/someothercomponent" component={Someothercomponent} />
    </Switch>
  </Dashboard>

Dashboard.js

  render() {
      const children = React.Children.map(this.props.children, child => {
          var router = React.cloneElement(child, { image: this.state.image });
          return router;
          // Like this the router Element does receive the image prop from
          // the Dashboard component. Now this image prop needs to be
          // passed on to the Account component.

      }

【问题讨论】：

标签： reactjs react-router-v4

【解决方案1】：

我喜欢一些已经出现的答案。给你一种以不同的方式解决这个问题的感觉，以及一些需要学习和添加到你的工具箱中的东西。我会说使用上下文。 Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。 https://reactjs.org/docs/context.html

因此，如果您进入您的帐户并且必须再次向下传递道具，这可能是实现此功能的好地方。

正确设置后，您可以在页面上执行类似的操作。但同样，您不只是传递一个，而是传递所有道具。然后，如果您还需要将它们传递到下一个组件

<AppContext.Consumer>
  {({prop1, prop2, prop3}) => {

  }}
 </AppContext.Consumer>

假设你在使用 React.createContext(); 时命名了你的变量 AppContext; 这个想法是，在多个级别传递 props 对某些人来说可能很烦人，但使用上下文，您可以随时引入属性，而不必担心是否正确传递了它们。请务必完整阅读这篇文章，有时您想使用上下文，有时又不想使用。

【讨论】：

【解决方案2】：

问题是组件覆盖了渲染道具。

删除component={Account}

我还在(props) 周围添加了括号以提高可读性

<Dashboard> 
  <Switch>
    <Route 
      path="/account"
      render={(props) => <Account {...props} /> } 
      exact 
    /> 
    <Route 
      path="/someothercomponent" 
      component={SomeOtherComponent} 
    />
 </Switch> 
</Dashboard>

或者：

const renderMergedProps = (component, ...rest) => { 
const finalProps = Object.assign({}, ...rest); 
return( React.createElement(component, finalProps) 
); 
} 

const PropsRoute = ({ component, ...rest }) => { 
  return ( 
    <Route {...rest} render={routeProps => { 
      return renderMergedProps(component, routeProps, rest); 
    }}/> 
  ); 
}

<Router> 
  <Switch> 
    <PropsRoute path='/login' component={Login} auth={auth} authenticatedRedirect="/" />  
    <PropsRoute path='/trades' component={Trades} user={user} />
  </Switch> 
</Router>

source

【讨论】：

【解决方案3】：

是的，请改用render 属性。

<Route path="path" render={() => <MyComponent {...this.props} />} />

【讨论】：

我已经尝试过了，不幸的是，它不起作用。我什至尝试注释掉元素，但 Account 组件仍然没有收到 Dashboard 组件的道具