Реакция прохождения подпорки через элемент переключателя

Question

У меня проблема с передачей реквизита через элементы 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.

      }

Answer 1

Проблема в том, что компонент переопределяет параметры рендеринга.

Удалить 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>

источник

Answer 2

Мне нравятся некоторые из уже представленных ответов.Чтобы дать вам ощущение решения этой проблемы по-другому, а также что-то, чтобы узнать и добавить в свой набор инструментов.Я бы сказал, использовать контекст.Контекст обеспечивает способ передачи данных через дерево компонентов без необходимости вручную пропускать подпорки на каждом уровне.https://reactjs.org/docs/context.html

Так что, если вы зайдете в свою учетную запись и вам придется еще раз передавать реквизиты, это может быть хорошим местом для реализации этого.

При правильной настройке вы можете сделать что-то подобное на своей странице.Но опять же, вы не просто пропускаете один, вы пропускаете все реквизитА потом, что если вам нужно также передать их на следующий компонент <<< это точка контекста.Я думаю, что использование контекста лучше, чем использование компонента, поскольку ваше состояние, учитывая, что компонент с состоянием обычно ограничен.С учетом контекста, ваш компонент Учетной записи может иметь несколько дочерних элементов, и вам не придется проходить весь процесс, чтобы выполнить то, чего вы хотите достичь.</p>

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

  }}
 </AppContext.Consumer>

Это предполагает, что вы называете свою переменную AppContext при использовании React.createContext ();Идея состоит в том, что передача реквизитов на многих уровнях может раздражать некоторых, но используя контекст, вы можете в любое время ввести свойство, не беспокоясь о том, правильно ли вы его передали.Обязательно прочитайте статью полностью, есть моменты, когда вы хотите использовать контекст, и времена, когда вы этого не делаете.

Answer 3

Да, вместо этого используйте свойство render.

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