为一系列反应组件添加样式答案

【问题标题】：Adding style to an array of react components为一系列反应组件添加样式
【发布时间】：2017-05-21 08:36:04
【问题描述】：

我想将 inline 样式添加到 React 组件数组中，有人知道如何在不直接将高度添加到“ProductComponent”中的情况下最好地做到这一点吗？

组件有三个嵌套的 div 我只想为数组中的每个组件添加样式到父 div。我想在一个 ScrollableList 组件中执行此操作，该组件采用 ProductComponents 数组。我想在每个 ProductComponent 上添加“height: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>
  )
}

【问题讨论】：

为什么要添加内联样式而不是仅仅添加一个具有与之关联的样式的类？

标签： arrays reactjs ecmascript-6 styles components

【解决方案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>
}

【讨论】：

我想确定 ScrollableList 组件中每个产品的高度，而不是 ProductComponent。
什么时候创建子数组？也许您可以在那时将高度作为道具传递？
我想让 Scrollable 列表可重用，并让它接受一个确定可滚动窗口高度的道具。所以不想将滚动添加到ProductComponent。这是我迄今为止最好的。 render(){ const array = this.props.children array.forEach(function(ProductComponent){ return ( <div style=“height:33%”> <ProductComponent /> </div> ) } return( <div> {array} </div> ) }
已编辑以添加另一个选项 - 类似于您所描述的但更实用？

【解决方案2】：

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

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

允许我将样式内联分配给数组中的每个组件。 codepen上的一个例子

【讨论】：

最佳答案！正是我想要的。

【解决方案3】：

最好的方法是将height 作为prop 发送到每个组件并设置默认值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。希望这会有所帮助！

【讨论】：