Question

我想将内联样式添加到React Components数组中，任何人都知道如何最好地执行此操作而不将高度直接添加到＆ProductSonent＆＃39 ;?

该组件有三个嵌套的div我只想将样式添加到数组中每个组件的父div。我想在ScrollableList组件中执行此操作，该组件采用ProductComponents数组。我想添加＆＃34;身高：33％＆＃34;在每个ProductComponent上。

我的产品组件＆＃39;。

  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

如果它始终是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>
}

Answer 2

好的，我在React Docs找到了我要找的东西。

facebookandroidwrapper790

允许我将内联样式分配给数组中的每个组件。关于codepen

的示例

Answer 3

最好的方法是将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>
})

这样，当您声明数组时，只要它是有效的height值就可以覆盖33％的任何内容。

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

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

将样式添加到反应组件数组中

3 个答案: