是否可以像 JavaScript 中的代码片段所示传递变量值？

Question

我想在单击按钮时生成随机颜色。请问生成随机颜色的方法是否正确？

randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

// --- more code ---

changeHeaderColor() {

  console.log("Change_header_color_was_clicked");

  this.setState({ colors: "randomColor" });

}

// --- more code ---

render() {

  return (

    <h1 style={{ color: this.state.colors }}>

      This is the header Component{" "}

      <button onClick={() => this.changeHeaderColor()}>

        Change Header Color

      </button>

    </h1>

  );

}

Answer 1

因为您是以静态方式执行此操作并将其设置为状态，所以您所能做的就是简单地说：const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);然后使用：<h1 style={{color: randomColor}}>您可以通过更改状态变量来获得简单的重新渲染选项，这会强制重新渲染。完整代码import React, { useState } from "react";export default function App() {  const [change, setChange] = useState(0);  const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);  const style = { color: randomColor };  const handleChange = (e) => {    e.preventDefault();    // Just trigger a change.    setChange(change + 1);  };  return (    <div className="App">      <h1 style={style}>Hello CodeSandbox</h1>      <button onClick={handleChange}>Change Colour</button>    </div>  );}