Question

我正在使用prop-types检查类型并将默认值设置为我的组件道具。我的道具之一是显示SVG图像的React.Node的颜色。

Rating.defaultProps = {
  iconColor: '#E5C100',
  iconFull: <StarSharp />
  iconEmpty: <StarBorderSharp />
  iconHalfFull: <StarHalfSharp />
}
Rating.propTypes = {
  iconColor: Proptypes.string,
  iconFull: Proptypes.Node,
  iconEmpty: Proptypes.Node,
  iconHalfFull: Proptypes.Node
};

我想将iconColor作为style={color: this.props.iconColor}传递到我的render方法中，但是我不确定如何传递。我曾尝试寻找答案，但似乎找不到。

Answer 1

如果我正确理解了您的问题，那么您应该能够通过以下方式计算样式：首先在组件的iconColor中检查有效的props，然后再使用默认的iconColor由Rating.defaultProps提供的道具。

为说明此技术，请考虑以下内容：

class Rating extends React.Component {

 render() {

    // If iconColor is undefined/falsey in this components props, then
    // fallback to the default iconColor prop as specified in the
    // Rating.defaultProps object
    const style = { 
       color : (this.props.iconColor || Rating.defaultProps.iconColor) 
    };

    // Return your JSX as needed, with locally computed style object
    return (<div style={ style }>
       ...
    </div>)
 }
}

Rating.defaultProps = {
  iconColor: '#E5C100',
  iconFull: <StarSharp />
  iconEmpty: <StarBorderSharp />
  iconHalfFull: <StarHalfSharp />
}

Rating.propTypes = {
  iconColor: Proptypes.string,
  iconFull: Proptypes.Node,
  iconEmpty: Proptypes.Node,
  iconHalfFull: Proptypes.Node
};

Answer 2

我找到了一种不依赖CSS继承的方法：

 const iconFull = React.cloneElement(props.iconFull, {'style': props.iconStyles});
 const iconEmpty = React.cloneElement(props.iconEmpty, {'style': props.iconStyles});
 const iconHalfFull = React.cloneElement(props.iconHalfFull, {'style': props.iconStyles});

我将道具从iconColor（字符串）更改为iconStyles（对象），以使其具有更广泛的功能

如何基于另一个道具更改React.Node的道具

2 个答案: