Обрабатывать случай «лямбда в атрибуте JSX» - PullRequest
Новая
       8

Обрабатывать случай «лямбда в атрибуте JSX»

0 голосов
/ 13 июня 2018

Существует существующий код: 

const FooRoute: React.SFC<RouteProps> =
  ({ component: Component, ...rest }) => {
    if (!auth.isFoo()) {
      return <Redirect to={{ pathname: '/404' }} />;
    }
    if ('render' in rest) {
      return (
        <Route {...rest} render={rest.render} />
      );
    } else {
      return (
        Component
          ?
          <Route
            {...rest}
            render={
              (props: RouteComponentProps<{}>) => <Component {...props} />}
          />
          : null
      );
    }
  };

Здесь есть ошибка:

enter image description here

Теперь, как работает getComponent функция будет выглядеть в этом случае?

Мысль о чем-то похожа на: 

const getComponent = (props: RouteComponentProps<{}>) => () => (
  <Component {...props} />
)

Тогда можно просто: 

<Route
  {...rest}
  render={getComponent}
/>

Но в этом случае Component не определено.Любые подсказки?

РЕДАКТИРОВАТЬ: Важное примечание - с использованием TypeScript.Поэтому нужно как-то передать Компонент в getComponent.

EDIT2: причина, по которой я использовал двойную лямбду, заключается в том, что она позволяет обрабатывать такие ситуации: 

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => (foo: string) => {
  ...
}

с 

<button onClick={handleClick('bar')} ... // foo === 'bar'

1 Ответ

0 голосов
/ 13 июня 2018

В вашем случае getComponent - это лямбда-функция, которая возвращает другую лямбда-функцию, но не компонент из-за (props) => () => ....Измените вашу getComponent функцию для получения компонента от функции render, как показано ниже. 

const getComponent = (Component: Component) => (props: RouteComponentProps<{}>) => (
  <Component {...props} />
)

и измените эту функцию 'render'. 

<Route
  {...rest}
  render={getComponent(Component)}
/>

Примечание: Вы получаете компонент как component с небольшим c и используете его как Component с большой буквы C.

...