試圖getComputedStyle從父元素/組件在React

Question

我需要得到計算背景顏色父元素傳遞給圖像組件。這是需要的，因爲我使用Contentful API來動態呈現圖像，並且我必須提供bg顏色查詢參數。

目前，這是行不通的：

import Card, { CardContent } from 'components/Card'; 
 
import React, { Component, PropTypes } from 'react'; 
 

 
import Image from 'components/Image'; 
 
import Link from 'react-router/lib/Link'; 
 

 
export default class Expertise extends Component { 
 
    
 
    componentDidMount() { 
 
    console.log(window.getComputedStyle(this._bg, null).getPropertyValue('backgroundColor')); 
 
    } 
 
    
 
    _renderColumned() { 
 
    return (
 
     <Card 
 
     layout={this.props.layout} 
 
     additionalClasses={['expertise-item-container']} 
 
     automationId={`expertise-container-${this.props.id}`} 
 
     ref={node => (this._bg = node)} 
 
     > 
 
     <CardContent layout={'text'} theme={'transparent'} padded> 
 
      <h3 className="expertise-headline h4" data-automation={`expertise-headline-${this.props.id}`}> 
 
      <span className="h1 card-grid-enumeration">{this.props.displayNumber}</span> 
 
      {this.props.headline} 
 
      </h3> 
 
      <p className="expertise-description" data-automation={`expertise-description-${this.props.id}`}>{this.props.description}</p> 
 
      { this.props.url && this.props.linkText ? 
 
      <Link className="expertise-link" data-automation={`expertise-link-${this.props.id}`} to={this.props.url}>{this.props.linkText}</Link> : 
 
       null } 
 
     </CardContent> 
 
     <CardContent layout={'image'} theme={'transparent'} padded> 
 
      <Image url={this.props.media.url} alt={this.props.media.alt} aspectRatio={'rectangle'} fit={'pad'} automationId={`expertise-image-${this.props.id}`} background={"F4F4F4"} /> 
 
     </CardContent> 
 
     </Card> 
 
    ); 
 
    } 
 

 
    _renderStacked() { 
 
    return (
 
     <div 
 
     className="expertise-item-container centered" 
 
     data-automation={`expertise-container-${this.props.id}`} 
 
     // ref={image => (this._image = image)} 
 
     ref={node => (this._bg = node)} 
 
     > 
 
     <h3 className="expertise-headline h4" data-automation={`expertise-headline-${this.props.id}`}> 
 
      <span className="h1 card-grid-enumeration">{this.props.displayNumber}</span>&nbsp; 
 
      {this.props.headline} 
 
     </h3> 
 
     <p className="expertise-description" data-automation={`expertise-description-${this.props.id}`}>{this.props.description}</p> 
 
     <Image url={this.props.media.url} alt={this.props.media.alt} aspectRatio={'banner'} fit={'pad'} automationId={`expertise-image-${this.props.id}`} ref={node => (this._image = node)} background={"F4F4F4"} /> 
 
     { this.props.url && this.props.linkText ? 
 
      <Link className="expertise-link" data-automation={`expertise-link-${this.props.id}`} to={this.props.url}>{this.props.linkText}</Link> : 
 
      null } 
 
     </div> 
 
    ); 
 
    } 
 

 
    render() { 
 
    return this.props.layout === 'columned' ? 
 
     this._renderColumned() : 
 
     this._renderStacked(); 
 
    } 
 

 
} 
 

 
Expertise.propTypes = { 
 
    id: PropTypes.string.isRequired, 
 
    layout: PropTypes.oneOf(['columned', 'stacked']).isRequired, 
 
    headline: PropTypes.string.isRequired, 
 
    description: PropTypes.string.isRequired, 
 
    media: PropTypes.object.isRequired, 
 
    url: PropTypes.string, 
 
    linkText: PropTypes.string, 
 
    displayNumber: PropTypes.number.isRequired 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

具體來說，getComputedStyle報告Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

只是想獲得成功background-color，最終我會比較這對給出的默認在Image組件的背景支撐中。

Answer 1

我認爲問題在於組件已被渲染之前無法獲得計算樣式（同樣的原因，您無法獲得ref）。您可以在其當地state（將在開始時將null或undefined或undefined或white）存儲父級bgcolor樣式，並將其傳遞給組件的子級。組件渲染後（componentDidMount()或window.addEventListener("load", ...)），您可以調用父項setState()方法設置其bgcolor狀態（）。然後這個組件將被重新提交，其子女將訪問其bgcolor。