使每个道具标题不同的颜色

Posted 2023-02-23

【中文标题】使每个道具标题不同的颜色

【英文标题】：Making each props title a different color

【发布时间】：2019-02-11 22:28:36

【问题描述】：

我在 React 中使用 props 编写了个人资料卡：

const Profilebox = props => (
<div className="Profilebox">
    <img src=props.image />
    <h1>props.title</h1>
    <h2>props.subtitle</h2>
    <p>props.text</p>
</div>)

是否可以为每张卡片使用不同的h2 颜色？

【参考方案1】：

 const Profilebox = props => (
   <div className="Profilebox">
      <img src=props.image />
      <h1>props.title</h1>
      <h2 style=props.style>props.subtitle</h2>
      <p>props.text</p>
   </div>)

您可以在道具中保留样式。或者您可以修改一个随机选择颜色并以这种方式设置颜色的函数。

 randomColorStyle = () => 

     returncolor: '#' + Math.floor(Math.random()*16777215).toString(16);
 

 const Profilebox = props => (
   <div className="Profilebox">
      <img src=props.image />
      <h1>props.title</h1>
      <h2 style=this.randomColorStyle>props.subtitle</h2>
      <p>props.text</p>
   </div>)

【参考方案2】：

绝对可以将不同的颜色从其父级传递给卡片。假设您正在通过道具进行映射以将适当的数据分配给每张卡片，您将能够添加另一个道具。在父级中，一些愚蠢的事情是：

const colorArray = ["red", "green", "blue", "orange", "black", "purple"];
profileCardData.map(profileCard => 
  let color = colorArray[Math.floor(Math.random() * colorArray.length)];
  return (
    <Profilebox image=image text=text style=color subtitle=subtitle/>
  )

然后，在您的 Profilebox 中，您将执行快速内联样式：

const Profilebox = props => (
<div className="Profilebox">
    <img src=props.image />
    <h1>props.title</h1>
    <h2 style=props.style>props.subtitle</h2>
    <p>props.text</p>
</div>)

以其他方式分配不同的颜色非常容易。这只是其中之一。

【参考方案3】：

希望下面的 sn-p 有所帮助。

const Profilebox = props => (
<div className="Profilebox">
    <img src=props.image || null />
    <h1>props.title || 'default Title'</h1>
    
    <h2 className=`bg_$Math.floor(Math.random() * Math.floor(3))+1`>props.subtitle || 'default subtitle'</h2>
    <p>props.text || 'default Text'</p>
</div>)

const Profiles = () => (<div><Profilebox image = ''/><Profilebox  image = ''/></div>)

ReactDOM.render(<Profiles/>, document.querySelector("#app"))

.Profilebox 
border : 1px solid gray;
width:50%;


.bg_1
  color:green;

.bg_2
  color:red;

.bg_3
  color:yellow;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app">
  
</div>