Реагировать - изменить цвет текста в компоненте на основе представления - PullRequest
Новая
       16

Реагировать - изменить цвет текста в компоненте на основе представления

0 голосов
/ 03 января 2019

У меня есть компонент, используемый для комментариев, и я хочу изменить цвет в зависимости от вида (или состояния?) Приложения.

Я использую этот компонент 

  <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;
    }
}

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Я смоделировал SmallComponent, который повторно используется в компонентах One и Two.SmallComponent просто берет prop с именем className и добавляет его к элементу, CSS которого можно настраивать извне (в данном случае это кнопка).Затем мы можем передать другой 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;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>
0 голосов
/ 03 января 2019

Вы можете сделать это на основе состояния.возьмем элемент состояния, скажем, 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>
...