Question

我希望显示每张卡顶部都带有Bootstrap徽标的卡。我想根据宠物的状况有条件地更改徽章的颜色。

render() {
        const isAdmin = true;
        const post = this.props.post; 
        const id = this.props.post.post_ID; 
        console.log(post);


     return (
        <div>

        <Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
        <span class="badge badge-secondary">{post.petStatus}</span>
            <Card.Img id="card-img-top" variant="top" src={post.img_path} />
            <Card.Body>
                <Card.Title>{post.pet_name}</Card.Title>
                <Card.Text id="PetName">
                  <strong>{post.petName} </strong>
                </Card.Text>
                <Card.Text id="content">
                  {post.content} 
                </Card.Text>
                <Card.Text>
                  <strong>Posted By: </strong>{post.name}
                </Card.Text>
                <Card.Text
                  <strong>Posted: </strong>{post.postedOn}
                </Card.Text>

          </Card>

Answer 1

根据您需要的颜色数量，您可以内联进行：

    <Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
    <span class="badge badge-secondary" style={{color: post.petStatus === "adopted" ? "blue" : "red"}}>{post.petStatus}</span>

...或者如果您需要几种颜色可能会更好地编写一个根据状态返回样式的助手：

getStyleForStatus = (status)=>{
    let statusColor
    switch (status){
        case "adopted":
            statusColor = "blue"
            break;
        case "lost":
            statusColor = "red"
            break;
        default:
          //
      return {color:statusColor}
    }
}
 render() {
    const isAdmin = true;
    const post = this.props.post; 
    const id = this.props.post.post_ID; 
    console.log(post);


 return (
    <div>

    <Card id="card-main" style={{ width: '18rem', margin: '12px' }}>
    <span class="badge badge-secondary" style={getStyleForStatus(post.petStatus)}>{post.petStatus}</span>

          {/* ... */}

      </Card>

如何根据关键字有条件地更改按钮的颜色

1 个答案: