Question

我有3个React组件都通过相同的道具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>
   )
 }

Answer 1

您在做什么并不是不正确的，但是我可以理解您想要干燥代码。我不会说什么是“正确”的方法，因为从技术上讲，没有正确的方法，只是您更喜欢基于堆栈的方法（例如，您是否在使用Redux或任何其他状态管理？）。

This medium post covers several methods of deep nesting components.

探索它，然后选择最适合您的。但是为了进行这次对话-您正确地并且以“反应方式”进行了操作。

Answer 2

我们可以使用上下文api。创建一个提供者和消费者。将提供程序内部的所有组件包装起来，提供程序接受一个价值道具，并且该道具中的数据可用于所有子消费者。并可以在消费者内部使用它们。

“为什么要在React中考虑新的Context API？ Mahesh Haldar https://link.medium.com/zrYj36RnhU

的“深潜”

将同一个prop传递给多个样式化的组件

2 个答案: