获取 ReactJS 元素的字体颜色答案

【问题标题】：Get font color of ReactJS element获取 ReactJS 元素的字体颜色
【发布时间】：2015-08-23 12:43:22
【问题描述】：

我有一个 React 组件，一个按钮，我需要将子元素的background-color 设置为按钮的color。我知道你不应该在 render() 函数中调用 this.refs.myElement.getDOMNode()，所以我不确定我应该如何布局。

目前，我的代码如下所示：

import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';
import classnames from 'classnames';

export default class GlyphButton extends Button {
    constructor(props) {
        super(props);
    }

    render() {
        let {
            glyph,
            className,
            children,
            ...props
        } = this.props;

        return (
            <Button ref='btn' {...props} className={classnames([className, 'glyph-button'])}>
                <Glyphicon glyph={glyph} />
                {children}
            </Button>
        );
    }
}

我需要这样做：

let color = this.refs.btn.style.color;
return (
    <Button ref='btn' ...>
        <Glyphicon glyph={glyph} style={{backgroundColor: color}} />
        {children}
    </Button>
);

很遗憾，this.refs 尚未填充。

如果你好奇，我这样做的原因是因为我使用 Glyphicon 的免费版 PNG 来制作一些图标，这些图标在透明背景上都是黑色的，我正在使用：

glyphicon.glyphicon-playing-dice:before {
   content: "";
   width: 20px;
   height: 20px;
   -webkit-mask-size: 100%;
   -webkit-mask-image: url(/img/glyphicons/glyphicons-playing-dice.png);
   display: block;
}

使它像一个字体图标。此类将使元素的background-color 成为显示图标的颜色。

【问题讨论】：

按钮的颜色从何而来？
它要么在style 中指定，要么从定义它的最近的祖先那里获取...默认情况下，body 的color 是黑色的。
请记住，btn.style.color 只会在颜色设置为内联时为您提供颜色。如果颜色是继承的，则必须使用developer.mozilla.org/en-US/docs/Web/API/Window/…。我建议将颜色作为道具传递给整个组件，然后您可以将其设置为按钮的颜色和图像的背景颜色。如果这不可行，则必须等到组件已安装 (componentDidMount)\，获取按钮的样式并使用颜色更新组件的状态以触发重新渲染。
是的，这应该是伪代码。

标签： css reactjs

【解决方案1】：

您可以将color 设置为状态并在componentDidMount 阶段进行更改。

getInitialState: function(){
   return {bgColor: ''}
 },
componentDidMount: function(){
   var color = React.findDOMNode(this.refs.btn).style.color;
    this.setState({bgColor : color});
}

因为 React 向我们推荐：

您的第一个倾向通常是尝试在您的应用程序中使用 refs 来“让事情发生”。如果是这种情况，请花点时间更批判性地思考应该在组件层次结构中的哪个位置拥有状态。

【讨论】：