Question

我有一些公共静态ColorPalette：

// pseudo code
const ColorPalette = {
  input: {
    normal: "white",
    hover: "grey",
  },
  special: {
    normal: "green",
    hover: "darkgreen",
  },
}
export default ColorPalette;

然后我有一些自动填充颜色的按钮类。如果颜色是为其设置调色板的颜色，则填充那些颜色。

// non functional code, for example of desired effect
class EasyButton extends React.Component<{color: string, hover: string}, any> {
  public static defaultProps = {
    color: ColorPalette.input.normal,
  }

  constructor(props) {
    if(props.color === ColorPalette.input.normal) {
      props.hover = ColorPalette.input.hover;
    } else if(props.color === ColorPalette.input.special) {
      props.hover = ColorPalette.special.hover;
    } else {
      props.hover = Darken(props.color);
    }
    super(props)
  }
}

问题是道具在超级之后无法修改，超级之前什么都不会发生。如何在功能上自动设置道具？

Answer 1

我在写这个问题时想出了一个不错的答案。创建一个静态函数并使用它来创建一组基于初始道具的新道具。

class EasyButton extends React.Component<{color: string, hover: string}, any> {
  public static defaultProps = {
    color: ColorPalette.input.normal,
  }

  public static autofillProps(props): the type of props {
    // based off props, make modifications, return new props
  }

  constructor(props) {
    super(EasyButton.autofillProps(props));
  }
}

希望这有助于某人。

Answer 2

您不希望在constructor中设置悬停颜色，因为您的组件的颜色可能会在后续渲染中由其父级更改。在这种情况下，您的悬停颜色将保持不变。

不要在组件中修改/添加道具，只需计算hover中的render颜色：

class EasyButton extends React.Component<{color: string, hover: string}, any> {
  public static defaultProps = {
    color: ColorPalette.input.normal,
  }

  getHoverColor = () => {
    if (this.props.color === ColorPalette.input.normal) {
      return ColorPalette.input.hover;
    } else if (this.props.color === ColorPalette.input.special) {
      return ColorPalette.special.hover;
    } else {
      return Darken(this.props.color);
    }
  }

  render() {
    const hover = this.getHoverColor()

    return // ...
  }
}

如果您发现在color道具不变的情况下定期重新渲染，则hover this.state componentWillReceiveProps color class EasyButton extends React.Component<{color: string, hover: string}, any> { public static defaultProps = { color: ColorPalette.input.normal, } componentWillReceiveProps(nextProps) { if (nextProps.color !== this.props.color) { this.setState({ hover: this.getHoverColor() }); } } getHoverColor = () => { if (this.props.color === ColorPalette.input.normal) { return ColorPalette.input.hover; } else if (this.props.color === ColorPalette.input.special) { return ColorPalette.special.hover; } else { return Darken(this.props.color); } } }变化。

with temp as (
select id
      , group
      , group_tracking
      , SUBSTR(group_tracking, 1,LOCATE(':',group_tracking)-1) * 3600 as First_PART_in_s
      , SUBSTR(group_tracking, LOCATE(':',group_tracking)+1,2) * 60 as Second_PART_in_s
      , SUBSTR(group_tracking, LOCATE(':',group_tracking, LOCATE(':',group_tracking)+1)+1, 2) as Third_PART_in_s
  from t2
)
select t1.id
      , t.group
      , int(sum(First_PART_in_s + Second_PART_in_s + Third_PART_in_s) / 360000) ||  replace(char(time('00:00:00') + mod(sum(First_PART_in_s + Second_PART_in_s + Third_PART_in_s),360000) seconds,ISO),'.',':') as duration
  from t1
  left join temp t
    on t1.id = t.id
  group by t1.id, group

如何在React组件的功能上自动填充道具？

2 个答案: