React js (props) css inline style 相关

Question

我想要多张不同背景颜色的卡片，我该怎么办？ 例如：

import React from "react";
import reactDom from "react-dom";

const BgColor=(props)=>{
    
    return(
       <>
        <div className="main_div">
            <div className="cards" >
                <div className="card-side front" >
                    <div><span>C</span>opy<span>C</span>ode</div>
                </div>
                <div className="card-side back">
                    <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                </div>
            </div>
        </div>
       </>
    )
}
export default BgColor;

在 app.js 中传递值

等等.....

请帮助我如何在 app.js 中传递值

Answer 1

这个例子很难帮助你。事实上，我们不知道你的 props 对象包含什么。

假设你的道具包含

{
   name: "toto",
   code: "myCode"
}

为了根据道具改变背景颜色，您有多种选择。

您可以根据您的道具使用动态类名：

const BgColor=(props)=>{
    
    return(
       <>
        <div className="main_div">
            <div className="cards" >
                <div className={`${props.name} card-side front`} >
                    <div><span>C</span>opy<span>C</span>ode</div>
                </div>
                <div className="card-side back">
                    <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                </div>
            </div>
        </div>
       </>
    )
}

请参阅

${props.name} card-side front} > 行。转到该组件的 css 或 scss 文件并在其中添加一个类选择器。 在我们的示例中，它将是

.toto {
   background: red
}

第二种选择是直接在你的 div 中注入 css。

假设您在提案中发送所需的背景颜色：

{
   backgroundColor: "red",
   code: "myCode"
}

为此，您必须这样做

const BgColor=(props)=>{
        
        return(
           <>
            <div className="main_div">
                <div className="cards" >
                    <div className="card-side front" style={{backgroundColor: props.backgroundColor}}>
                        <div><span>C</span>opy<span>C</span>ode</div>
                    </div>
                    <div className="card-side back">
                        <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                    </div>
                </div>
            </div>
           </>
        )
    }

如果你想进一步了解 React 中的 css，可以查看： https://reactjs.org/docs/faq-styling.html、React.js inline style best practices、https://create-react-app.dev/docs/adding-a-stylesheet/

更新

您可以发送一组颜色，例如 <BgColor colors={["red", "blue"]} />，然后在您的 BgColor 组件中，您可以映射您的道具，例如：

    const BgColor=({colors})=>{

     return (
      <div className="main_div">
        <div className="cards">
            {colors.map((color, index) => {
                return (
                    <div
                        className="card-side front"
                        style={{ backgroundColor: color }}
                        key={index}
                    >
                        <div>
                            <span>C</span>opy<span>C</span>ode
                        </div>
                    </div>
                );
            })}
         </div>
       </div>
     );    
    }