Question

我在JS文件夹中有这段代码......

var bgColors = { 
  "Default": "#81b71a",
  "Blue": "#00B1E1",
  "Cyan": "#37BC9B",
  "Green": "#8CC152",
  "Red": "#E9573F",
  "Yellow": "#F6BB42"
};


class App extends Component {      
  constructor() {        
    super();

    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
       <Helmet>
         <style>{'body { background-color: red; }'}</style>
       </Helmet>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

如你所见。背景设置为红色。如何让背景颜色每秒左右旋转颜色？我想让颜色在我建立的颜色列表中旋转。

Answer 1

＆＃13;

var bgColors = { 
  default: "#81b71a",
  blue: "#00B1E1",
  cyan: "#37BC9B",
  green: "#8CC152",
  red: "#E9573F",
  yellow: "#F6BB42",
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: bgColors.default,
    };
    
    this.interval = setInterval(() => {
      let randomColor = bgColors[
        Object.keys(bgColors)[
          Math.floor(Math.random() *
          Object.keys(bgColors).length)
        ]
      ];
      this.setState(() => ({bgColor: randomColor}))
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.interval)
  }
  
  render() {
    return (
      <div 
        style={{
          height: '200px',
          backgroundColor: this.state.bgColor
        }}
      >
        Background color changes every second
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

在ReactJS中旋转背景颜色

1 个答案: