Javascript 更改背景颜色芯片取决于用户，如果管理员与否

我想要的是改变芯片的背景颜色，这取决于用户是否是管理员，在注释列表中为每个用户使用不同的颜色，以便最终用户可以定义谁是管理员，谁不是管理员

这是我的代码

import React from 'react';
import TimeAgo from 'react-timeago';
import PropTypes from 'prop-types';
import Card from 'components/commons/Card';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import { Grid  } from '@material-ui/core';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { getComments } from 'api'

const styles = {
  root: {
    paddingTop: '25px',
    color: '#FFFFFF'
  },
  chipA: {
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: '#00a6ff',
    textTransform: 'uppercase',
    fontSize: '1rem',
    letterSpacing: '0px',
    textAlign: 'center'
  },
  chipB: {
    color: 'primary',
    fontWeight: 'bold',
    backgroundColor: '#ff8400',
    textTransform: 'uppercase',
    fontSize: '1rem',
    letterSpacing: '0px',
    textAlign: 'center'
  },
  Button: {
    fontWeight: 'bold',
    fontSize: '1rem',
    letterSpacing: '0px',
    textTransform: 'uppercase',
    borderRadius: '2.5px',
    textAlign: 'center',
  },
};

class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      comment: '',
      isAdmin: [],
    };
  }

  componentDidMount() {
    console.log(this.props.isAdmin)
    if (this.props.isAdmin) { 
      console.log('Admin User'); 
      }else {
      console.log('Normal User');
      }
    };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  }

  renderComments(comments) {
    const condition = this.props.isAdmin;
    console.log(condition);

    const commentDivs = comments.map(user => {
      return (
        <div key={user.id}>
          <div className="row">
            <div className="col comment">{user.description}</div>
          </div>
          <div className="row">
            <div className="col-9">
              <TimeAgo className="time-ago" date={user.createdAt} />
            </div>
            <div className="col-3">
              <div style={styles.wrapper}>
                <span className="time-ago">
                  <Chip
                    label={user['user.firstname'] + ' ' + user['user.lastname']}
                    style={{ backgroundColor: condition ? "#00a6ff" : "#ff8400" , color: 'white', fontWeight: 'bold',
                    textTransform: 'uppercase',
                    fontSize: '1rem',
                    letterSpacing: '0px',
                    textAlign: 'center'}}
                  />
                </span>
              </div>
            </div>
          </div>
          <hr />
        </div>
      )
    });
    return (
      <div>{commentDivs}</div>
    );
  }

  render() {
    return (
      <Card title="comments">
        <Grid item xs={12} md={12}>
          {this.renderComments(this.props.comments)}
          <div className="form-group">
            <textarea
              className="form-control"
              name="comment"
              placeholder="Write a comment"
              onChange={this.onChange}
              value={this.state.comment}
              rows="3"
            ></textarea>
          </div>
          <div className="form-group">
            <Button
              onClick={() => this.props.onSubmit(this.state.comment)}
              color="primary"
              variant="contained"
              size="large"
              style={styles.Button}>
              Send
             </Button>
          </div>
        </Grid>
      </Card>
    );
  }
}

Comment.propTypes = {
  comments: PropTypes.array.isRequired,
  onSubmit: PropTypes.func.isRequired,
  isAdmin: PropTypes.bool,
};

const mapStateToProps = state => {
  return {
    isAdmin: state.auth.isAdmin,
  };
};

export default withRouter(connect(mapStateToProps, { 
})(Comment)) ;

从“React”导入React；
从“react TimeAgo”导入TimeAgo；
从“道具类型”导入道具类型；
从“组件/公用程序/卡”导入卡；
从“@material ui/core/Chip”导入芯片；
从“@material ui/core/Button”导入按钮；
从'@material ui/core'导入{Grid}；
从“react router dom”导入{withRouter}；
从'react redux'导入{connect}；
从“api”导入{getComments}
常量样式={
根目录：{
paddingTop:'25px'，
颜色：“#FFFFFF”
},
奇帕：{
颜色：'白色'，
fontWeight:'粗体'，
背景颜色：“#00a6ff”，
textTransform:'大写'，
fontSize:'1rem'，
字母间距：“0px”，
textAlign:“中心”
},
chipB：{
颜色：'主'，
fontWeight:'粗体'，
背景颜色：“#ff8400”，
textTransform:'大写'，
fontSize:'1rem'，
字母间距：“0px”，
textAlign:“中心”
},
按钮：{
fontWeight:'粗体'，
fontSize:'1rem'，
字母间距：“0px”，
textTransform:'大写'，
边界半径：“2.5px”，
textAlign:'中心'，
},
};
类注释扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
评论：“”，
isAdmin:[]，
};
}
componentDidMount（）{
console.log（this.props.isAdmin）
如果（this.props.isAdmin）{
log（'Admin User'）；
}否则{
console.log（“普通用户”）；
}
};
onChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
}
renderComments（注释）{
const condition=this.props.isAdmin；
控制台日志（条件）；
const commentDivs=comments.map（用户=>{
返回(
{user.description}

)
});
返回(
{commentDivs}
);
}
render（）{
返回(
{this.renderComments（this.props.comments）}
this.props.onSubmit（this.state.comment）}
color=“primary”
variant=“包含”
size=“大”
style={style.Button}>
发送
);
}
}
Comment.propTypes={
注释：需要PropTypes.array.isRequired，
onSubmit:PropTypes.func.isRequired，
isAdmin:PropTypes.bool，
};
常量mapStateToProps=状态=>{
返回{
isAdmin:state.auth.isAdmin，
};
};
使用路由器导出默认值（connect（mapStateToProps，{
})（评论））；

我定义的是，我改变颜色取决于谁注册了，但你想要的是在两个用户中的任何一个中识别谁是管理员或不是管理员，无论是管理员还是普通用户

---

如果我理解正确，您想将管理员与其他注册用户分开？您正在根据地图之外的道具设置“条件”。使用映射用户的状态来设置芯片颜色。是的，它是正确的@sergeyGubarev，请以@DovRine为例说明如何设置，因为我是ReactJS新手，只需使用您已经发布的代码即可。找到条件检查，并在映射函数中检查用户，而不是使用渲染函数顶部的设置。如果我理解正确，您希望将管理员与其他注册用户分开？您正在基于映射之外的道具设置“条件”。使用映射用户的状态来设置芯片颜色。是的，它是正确的@sergeyGubarev，请以@DovRine为例说明如何设置，因为我是ReactJS新手，只需使用您已经发布的代码即可。查找条件检查，并在“贴图”函数中检查用户，而不是使用“渲染”函数顶部的设置。