问题描述
我想要多张不同背景颜色的卡片怎么办? 例如:
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 中传递值
解决方法
这个例子很难帮到你。事实上,我们不知道你的 props 对象包含什么。
假设你的 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>
</>
)
}
请参阅 第二种选择是直接在 div 中注入 css。 假设您在提案中发送了所需的背景颜色: 为了做到这一点,你必须这样做 如果你想了解更多关于 React 中的 css,你可以查看:
https://reactjs.org/docs/faq-styling.html、React.js inline style best practices、https://create-react-app.dev/docs/adding-a-stylesheet/ 更新 您可以发送一组颜色,例如 .toto {
background: red
}
{
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>
</>
)
}
<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>
);
}