React js (props) css inline style 相关

Posted 2023-02-21

【中文标题】React js (props) css inline style 相关

【英文标题】：related to React js (props) css inline style

【发布时间】：2021-09-01 01:31:19

【问题描述】：

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

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 中传递值

【问题讨论】：

请更具体一些。创建一个代码框以帮助我们更好地了解您

你想从它的父组件传递一些颜色到这个组件？

【参考方案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>
     );    
    

【讨论】：

如何在 App.js 中为更多卡片传值

喜欢

从“react”导入反应；从“react-dom”导入 ReactDom；从“./components/Home”导入主页；从“./components/Header”导入页眉；从“./components/Navbar”导入导航栏；从“./components/BgColor”导入 BgColor； function App() return ( 跨度> ); 导出默认应用；