как вы отображаете HOCs в React?

Question

Я понимаю HOCs до определенного уровня в React.Я просто немного запутался, как они отображаются.так скажем у меня есть следующее

export const authenticateUser = WrappedComponent => props => (
  props.authenticated ? <WrappedComponent {...props} /> : <div> Please log in to continue </div>
)

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

Я потом бьюсь, куда мне позвонить authenticateUser

Я импортировал его в свой основной файл

изатем присваивает его const примерно так:

const auth = authenticateUser(welcomeScreen)

но я все еще не совсем так, как я рендерим auth.Я пытался сделать {auth}, но это кажется неправильным.

Я также не совсем уверен, куда я передаю ...props в завернутый компонент.любой совет?

Answer 1

Это зависит от того, где он вам нужен, я бы сказал, что вы можете поместить его в App.tsx следующим образом:

return (
   ....
   <Auth />
   ....
)

Помните, что вы должны изменить auth на Auth