我想要的是根据是否有用户admin来更改芯片的背景颜色,在注释列表中为每个用户设置不同的颜色,以便最终用户可以定义谁是管理员,谁是谁不。
这是我的代码
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)) ;
我定义的是,更改颜色取决于谁注册,但您要确定的是在两个用户(无论是admin还是普通用户)中的任何一个中识别谁是管理员。