尝试从 React 中的父元素/组件获取计算样式

Posted 2023-02-23

【中文标题】尝试从 React 中的父元素/组件获取计算样式

【英文标题】：Trying to getComputedStyle from parent element/Component in React

【发布时间】：2017-10-13 13:12:21

【问题描述】：

我需要将计算出的背景颜色作为父元素传递给 Image 组件。这是必需的，因为我使用 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，最终我会将其与背景道具中给图像组件的默认值进行比较。

【参考方案1】：

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

【讨论】：

我想指出，根据：facebook.github.io/react/docs/refs-and-the-dom.html#caveats，ref 被调用了两次，其中一次元素为 null，因为它清除了元素。