为反应组件数组添加样式

Question

我想将内联样式添加到 React 组件数组中，有人知道如何最好地做到这一点而不直接将高度添加到"产品组件"中吗？

该组件有三个嵌套的div，我只想将样式添加到数组中每个组件的父div 中。我想在ScrollableList组件中执行此操作，该组件采用ProductComponents数组。我想在每个产品组件上添加"高度：33%"。

我的"产品组件"。

  class ProductComponent extends Component {
    render() {      
      return (
            <div
              className="productContainer"
              key={id}
            >
              <div className="imageContainer" >
                <img src={ImageURL} role="presentation" />
              </div>
              <div className="productDetails">
                <div className="productName"><strong>{Name}</strong></div>
                <div className="productPrice">£ {Price}</div>
                <div className="productBuyButton">
                </div>
              </div>
            </div>
          );
      }
  }

我有一个这些组件的数组，我在另一个 ScrollableList 组件中用作子组件。

render(){
  const array = this.props.children
  const children = array.map(ProductComponent => { 
     return(
      add style 'height:33%' to the div productContainer  
  }
  return(
   <div>
     {children}
   </div>
  )
}

Answer 1

好的，我在 React 文档中找到了我想要的东西。

{children.map(element => {
  return (
    <element.type
      {...element.props}
      style={{
        height: '33%',
      }}
    />
  )
})}

允许我为数组中的每个组件内联分配样式。代码笔示例

Answer 2

如果它总是height: 33%或其他一些已知的样式，那么你不能把它硬编码到组件中吗？

喜欢：

const product = (props) =>
        <div
          className="productContainer"
          style={{height: '33%'}}   // This should work?
          key={id}
        >
          <div className="imageContainer" >
            <img src={ImageURL} role="presentation" />
          </div>
          <div className="productDetails">
            <div className="productName"><strong>{Name}</strong></div>
            <div className="productPrice">£ {Price}</div>
            <div className="productBuyButton">
            </div>
          </div>
        </div>

或者，您可以将其放在CSS中：

.productContainer {
  height: 33%;
}

如果要从可滚动列表组件中传递高度，可以这样做：

可滚动列表

render(){
 return (
   <div>
     {this.props.children.map((component) =>
       <div style={{height: '33px'}}>component</div>)}
   </div>
}

<</div> div class="one_answers">

最好的方法是将height作为道具发送到每个组件并设置默认值 33% .

const arrayOfProducts = this.props.children;
arrayOfProducts.map((product) => {
       <div
          style={{ height: product.height || 33% }}
          className="productContainer"
          key={id}
        >
          <div className="imageContainer" >
            <img src={product.ImageURL} role="presentation" />
          </div>
          <div className="productDetails">
            <div className="productName"><strong>{product.Name}</strong></div>
            <div className="productPrice">£ {product.Price}</div>
            <div className="productBuyButton">
            </div>
          </div>
        </div>
})

这样，当您声明数组时，您可以使用所需的任何值覆盖 33%，只要它是有效的height值即可。

const arrayOfProducts = [
  {
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
  {
    height: 25px,
    ImageUrl: 'exampleImgUrl',
    Name: 'exampleName',
    Price: '$3.00'
  },
]

如果要使用此数据，则第一个ProductComponent的高度为 33%，第二个高度为 25px。希望这有帮助！