React - 获取组件中的随机颜色

时间:2017-06-05 23:26:19

标签: javascript reactjs ecmascript-6

我的React项目中有一个组件,我试图通过道具传递随机颜色然而它不起作用(虽然随机数工作得很好)。我不确定我在这里做错了什么,我的GoogleFu + StackO搜索没有得到答案。任何人都知道我做错了什么?

我的代码是:

    getRandomColor(){
    let colorValues = ["red", "blue", "green", "yellow"];
    return colorValues[Math.floor(Math.random() * colorValues.length)];
  }

  generatePulse(i) {
    const props = {
      key: i,
      top: this.getRandomNumber(-385, 556),
      left: this.getRandomNumber(-1000, 2500),
      scale: `scale(${this.getRandomNumber(1, 20)})`,
      fade: `fade ${this.getRandomNumber(1, 60)}s`,
      scaling: `scaling ${this.getRandomNumber(1, 25)}s`,
      background: `background ${this.getRandomColor}`,
    }
    return (<Stars {...props} />)
  }

这应该影响到这里的背景(我知道我有2个动画正在运行,这是我需要解决的另一个问题)

    class Stars extends React.Component {
  render() {
    return (
      <Starholder>
        <Star style={{
          left: this.props.left + 'px',
          top: this.props.top + 'px',
          transform: this.props.scale,
          background: this.props.background,
          animation: this.props.fade + ' normal forwards ease-in-out',
          animation: this.props.scaling + ' infinite alternate',}}></Star>
      </Starholder>
    );
  }
}

0 个答案:

没有答案