Css 获取ReactJS元素的字体颜色

我有一个React组件，一个按钮，我需要将子元素的

背景色设置为按钮的
颜色。我知道您不应该在
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>
);

使其看起来像一个字体图标。此类将使元素的
背景色
成为显示图标的颜色。
您可以将
颜色
设置为一种状态，并在
componentDidMount
阶段对其进行更改

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

因为我们建议：

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

按钮的颜色是从哪里来的？它要么是在
样式中指定的，要么是从定义它的最近的祖先那里得到的。。。默认情况下，
body
的
color
为黑色。请记住，
btn.style.color
仅在内联设置时才会显示颜色。如果颜色是继承的，则必须使用。我建议将颜色作为道具传递给整个组件，然后您可以将其设置为按钮的颜色和图像的背景色。如果不可能，您必须等待组件装入（
componentDidMount
）\，获取按钮的样式并用颜色更新组件的状态以触发重新加载。是的，这应该是伪代码。
getInitialState: function(){
   return {bgColor: ''}
 },
componentDidMount: function(){
   var color = React.findDOMNode(this.refs.btn).style.color;
    this.setState({bgColor : color});
}