将相同的道具传递给多个样式组件答案

【问题标题】：Passing in same prop to multiple styled components将相同的道具传递给多个样式组件
【发布时间】：2019-07-07 14:30:00
【问题描述】：

我有 3 个 React 组件都通过了相同的 prop isNewListingsHeader。我正在使用样式化组件进行 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>
   )
 }

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

我们可以使用上下文 api。创建提供者和消费者。将所有组件包装在 Provider 中，Provider 接受一个 value prop，并且该 prop 中的数据可供所有子消费者使用。并且可以在消费者内部使用它们。

“为什么你应该考虑在 React 中使用新的 Context API？ — 深潜”，作者 Mahesh Haldar https://link.medium.com/zrYj36RnhU

【讨论】：

【解决方案2】：

您所做的并没有错，但我可以理解您想要干掉您的代码。我不会说什么是“正确”的方式，因为在技术上没有正确的方式，只是你喜欢根据你的堆栈来做的方式（例如，你使用 Redux 还是任何其他状态管理？）。

This medium post covers several methods of deep nesting components.

探索并选择适合您的。但是为了这次谈话 - 你正在正确地以“反应方式”做这件事。

【讨论】：

非常感谢。这真的很有趣 - 我使用了 recompose nest() 方法。