является правильный синтаксис в React JSX?

Question

У меня странный случай, когда я использовал разделение кода в React SPA.

Мой код иногда должен отображать тонкий компонент, а в других случаях - полный компонент (для авторизованных пользователей). теперь Component был отправлен классу как часть props, а в функции рендеринга я пытаюсь отобразить:

<this.props.Component />

и вот странный случай. иногда эта строка кода выдает ошибку:

error Cannot read property 'Component' of undefined

с трассировкой стека, указывающей на эту строку. В других случаях он работает отлично.

Может ли кто-нибудь объяснить, неверен ли этот синтаксис? или, может быть, из-за чего он иногда не работает?

Answer 1

Кажется, что правильный ответ заключается в том, что этот синтаксис недопустим (начиная с React 16), я до сих пор не могу понять, почему он сработал для меня, но если кому-то нужно отрендерить компонент на основе получаемых им реквизитов, он должен сделать это следующим образом (спасибо @David):

{this.props && this.props.Component({
    onClickHandler: this.onClick,
    currentUser: this.props.currentUser,
    etc..
  })}

и тип компонента должен быть функцией.

еще один вариант, для кого может понадобиться написать чистый JSX:

const { Component } = this.props

return (
      <Component
        currentUser={this.props.currentUser}
        onClickHandler={this.onClick />
)