React中通过props传值实现多卡片不同背景色的操作方法

1. 改造自定义BgColor组件，新增背景色相关props #

你可以给组件增加可接收的背景色参数，比如区分卡片正面、反面的背景色，也可以设置默认值避免不传参数时报错。修改后的代码如下：

import React from "react";

const BgColor=(props)=>{
    // 设置默认背景色，不传props时生效
    const defaultFrontBg = "#fff";
    const defaultBackBg = "#f0f0f0";
    return(
       <>
        <div className="main_div">
            <div className="cards" >
                {/* 正面加行内样式，用props传的背景色，没有就用默认值 */}
                <div className="card-side front" style={{backgroundColor: props.frontBg || defaultFrontBg}}>
                    <div><span>C</span>opy<span>C</span>ode</div>
                </div>
                {/* 背面同理 */}
                <div className="card-side back" style={{backgroundColor: props.backBg || defaultBackBg}}>
                    <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                </div>
            </div>
        </div>
       </>
    )
}
export default BgColor;

如果不需要区分正反背景，只需要全卡片统一背景，直接把style加在.cards对应的div上即可。

2. 在App.js中传递不同背景色参数 #

导入BgColor组件后，给每张卡片传入不同的颜色值即可，支持十六进制、rgb、rgba、合法颜色名等所有CSS支持的颜色格式：

import React from 'react';
import BgColor from './BgColor'; // 按你实际的文件路径调整

function App() {
  return (
    <div className="App">
      {/* 第一张卡片：正面蓝色，背面浅蓝 */}
      <BgColor 
        frontBg="#165DFF" 
        backBg="#E8F3FF" 
        code="console.log('第一个卡片')" 
      />
      {/* 第二张卡片：正面绿色，背面浅绿 */}
      <BgColor 
        frontBg="#00B42A" 
        backBg="#E8FFEA" 
        code="console.log('第二个卡片')" 
      />
      {/* 第三张卡片：正面红色，背面浅红 */}
      <BgColor 
        frontBg="#F53F3F" 
        backBg="#FFECE8" 
        code="console.log('第三个卡片')" 
      />
    </div>
  );
}

export default App;

补充说明 #

• 如果你的全局CSS中.card-side类已经设置了background属性且优先级高于行内样式，可以在行内样式后加!important处理，比如style={{backgroundColor: props.frontBg + '!important'}}
• 也可以直接传整个style对象作为props，灵活度更高，比如传cardStyle={{background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'}}，组件里直接使用即可。

内容的提问来源于stack exchange，提问作者ZAHID KHAN