Question

我有一个用于发表评论的组件，我想根据应用程序的视图（或状态？）更改颜色。

我正在使用此组件

  <Grid item xs={6}>
        <Typography variant="subtitle1" color="secondary">
          Previous comments:
        </Typography>
        <CommentHistory comments={comments} />
      </Grid>

在一个较大的组件中，我想根据我正在使用的较大组件来更改印刷文字的颜色。案例是一个从服务中返回的字段，但是我想根据以下内容更改类名这个较小的组件正在使用哪个组件。

   return comments.map(comment => {
          return comment && this.renderComment(comment);
        });
      }

   private renderComment(comment: Map<{}, {}>) {
    const { classes } = this.props;
    let from: React.ReactNode;

    switch (comment.getIn(["from", "role"])) {
      case "ROLE_MENTOR":
        from = (
          <Typography
            variant="body2"
            className={classnames(
              classes.commentFromMentor,
              "comment-from comment-from--mentor"
            )}>
            Mentor POC
          </Typography>
        );
        break;
      case "ROLE_OSBP_SUPPORT":
        from = (
          <Typography
            variant="body2"
            className={classnames(
              classes.commentFromOsbpSupport,
              "comment-from comment-from--osbp_support"
            )}>
            Mentor Protégé Program Reviewer
          </Typography>
        );
        break;
      default:
        from = (
          <Typography variant="body2" className="comment-from">
            Unknown Commenter
          </Typography>
        );
        break;
    }
}

Answer 1

您可以根据状态执行此操作。取一个状态元素，让它说textRed，如果其真实颜色为红色，否则颜色为黑色。我将向您展示

state = {textRed：false;}

随时随地更改状态逻辑。

已加入反应组件

        <Grid item xs={6}>
        <Typography className ={this.state.textRed === false? "secondary" : "danger"} variant="subtitle1">
          Previous comments:
        </Typography>
        <CommentHistory comments={comments} />
      </Grid>

Answer 2

我模拟了一个SmallComponent，它已在组件One和Two中重用。 SmallComponent仅需一个名为prop的{{1}}并将其添加到可从外部配置CSS的元素中（在这种情况下，这是一个按钮）。然后，我们可以传递不同的className并根据需要设置其样式

className

const SmallComponent = ({ className, text }) => (
  <button className={className}>{text}</button>
);

const One = () => <SmallComponent text="From One" className="one" />;

const Two = () => <SmallComponent text="From Two" className="two" />;

const App = () => (
  <div>
    <One />
    <Two />
  </div>
);

ReactDOM.render(<App />, document.getElementById("app"));

.one {
  color: red;
}

.two {
  color: blue;
}

React-根据视图更改组件中文本的颜色

2 个答案: