Question

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

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

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成为显示图标的颜色。

Answer 1

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

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

因为React建议我们：

你的第一个倾向通常是试图在你的应用中使用refs“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。

获取ReactJS元素的字体颜色

1 个答案: