javascript - react 如何将 Prop 传递给组件中的内联 css 样式

Question

我需要绘制一些彩色方 block ，并使用 Prop 来控制这些方 block 的颜色。

当前代码不工作

   import React from "react"; 

   class SketchExample extends React.Component {

   constructor(props) {
    super(props);   
   }


   render() {
    const { color } = this.props;

    return <div style={{ color: this.props.color, width: "36px", height: "36px" }} />;   } }

   export default SketchExample;

和 app.js 文件

import React from "react";
import ReactDOM from "react-dom";
import SketchExample from "./SketchExample";

function App() {
  return (
    <div className="App">
      <SketchExample color={{ r: "201", g: "112", b: "19", a: "1" }} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

哪一部分出了问题？谢谢。

Answer 1

传递 color 将使 div 中的文本成为该颜色。

你需要它 backgroundColor 来制作“彩色方 block ”。

此外，您不能将对象传递给样式，它必须是字符串。

return (
    <div 
        style={{ backgroundColor: `rgba(${Object.values(this.props.color).join(", ")})`, width: "36px", height: "36px" }} 
    /> 
);