Передача в одной и той же опоре нескольким стилизованным компонентам

Question

У меня есть 3 компонента React, которым все передается одна и та же поддержка isNewListingsHeader.Я использую Styled Components для CSS стилей.Мне интересно, есть ли более чистый способ передачи этой подпорки в 3 различных стилизованных компонента SortBarWrapper, SortOptionsWrapper и SortOptionsWrapper, чтобы мне не приходилось каждый раз определять isNewListingsHeader.

// Styled Components
const SortBarWrapper = styled.div`
   position: relative;
   ${props => !props.isNewListingsHeader && `
     height: 100px;
  `}
`

const SortLineWrapper = styled.div`
   width: 100%;
   ${props => !props.isNewListingsHeader && `
     position: absolute;
     bottom: 0;
   `}
`

const SortOptionsWrapper = styled.div`
   box-sizing: border-box;
   ${props => !props.isNewListingsHeader && `
     padding-bottom: 24px;
     padding-top: 32px;
   `}
`


 render () {
   return (
     <SortBarWrapper isNewListingsHeader={this.props.isNewListingsHeader}>
       <SortLineWrapper isNewListingsHeader={this.props.isNewListingsHeader}>
         <SortOptionsWrapper isNewListingsHeader={this.props.isNewListingsHeader}>
           // Display Sort Options
         </SortOptionsWrapper>
       </SortLineWrapper>
     </SortBarWrapper>
   )
 }

Answer 1

Мы можем использовать контекст API.Создать провайдера и потребителя.Оберните все компоненты внутри провайдера, провайдер принимает значение проп, и данные в этом подпорке доступны для всех дочерних потребителей.И можете использовать их внутри потребителя.

«Почему вы должны рассмотреть новый Context API в React?- Глубокое погружение »Махеш Халдар https://link.medium.com/zrYj36RnhU

Answer 2

То, что вы делаете, не является неправильным, но я понимаю, что вы хотите высушить ваш код.Я не собираюсь говорить, что такое «правильный» путь, потому что технически нет правильного способа, просто способы, которые вы предпочитаете делать на основе вашего стека (например, используете ли вы Redux или любое другое управление состоянием?).

Этот средний пост посвящен нескольким методам глубокого вложения компонентов.

Изучите это и выберите подходящий для вас.Но ради этого разговора - вы делаете это правильно и «Реагируй».