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

【问题标题】：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 颜色？

【问题讨论】：

标签： reactjs components react-props

【解决方案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 = () => {

     return{color: '#' + 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>

【讨论】：