试图从React

Question

我需要将计算出的背景颜色作为父元素传递给Image组件。我需要这样做，因为我使用Contentful API动态渲染图像，我必须提供一个bg颜色查询参数。

目前还没有工作：

＆＃13;

＆＃13;

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
};

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

具体而言，getComputedStyle报告Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

只是试图成功获得background-color，最终我会将其与Image组件的背景道具中给出的默认值进行比较。

Answer 1

我认为问题在于，在呈现组件之前无法获得计算样式（与您无法获得ref的原因相同）。您可以在其本地bgcolor中存储父state样式（开头为null或undefined \ white，无论如何）并将其传递给组件的孩子。在呈现组件（componentDidMount()或window.addEventListener("load", ...)）之后，您可以调用父setState()方法来设置其bgcolor状态（）。然后将重新呈现此组件，其子组将访问其bgcolor。