Question

为澄清问题而更新：我要在这里尝试做的是对于每个索引=== 0的实例，我想有条件地将黑色类（recentTitleClass）应用于印刷文本。我通过道具将两个css类previousTitleClass和最近TitleClass传递给组件。现在，我只想将lastingTitleClass仅用于数组的第一个实例。如果添加了新的注释/标题，则此数组将更改，因此将标记为previousTitleClass＆最近的TitleClass。

这是我到目前为止所拥有的。

  interface IProps {
      comments?: List<Map<{}, {}>>;
      previousTitleClass?: string;
      recentTitleClass?: string;
    }

    type Props = IProps & WithStyles<typeof styles>;
    class Component extends React.Component<Props> {
      public render(): React.ReactNode {
        const { comments } = this.props;

        if (!comments || comments.count() <= 0) {
          return null;
        }

        return comments.map((comment, index) => {
        const shouldHaveClass = index === 0;


          return (
            comment && (
              <React.Fragment key={index}>
                {this.renderComment(comment, shouldHaveClass)}
              </React.Fragment>
            )
          );
        });
      }

      private renderComment(comment: Map<{}, {}>, shouldHaveClass:any) {
        const { classes, previousTitleClass, recentTitleClass } = this.props;
        const recentTitleClass = shouldHaveClass ? "commentFromOsbpSupport" : null;

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

  --------------

该组件如何在另一个组件中使用

<CommentHistory comments={comments} previousTitleClass={classes.previousTitleClass} recentTitleClass={classes.recentTitleClass}/>

Answer 1

所以我不知道您到底要什么，但这是一个例子：

return comments.map((comment, index) => {
  const shouldHaveClass = index === 0;
  return (
    comment && (
      <React.Fragment key={index}>
        {this.renderComment(comment, shouldHaveClass)}
      </React.Fragment>
    )
  );
});

然后更新您的renderComment以接受另一个参数

renderComment(comment: Map<{}, {}>, shouldHaveClass:any

然后最后添加

// <---- here
const shouldHaveClassName = shouldHaveClass ? 'IHAVETHECLASS' : null;

         <Typography
            variant="body2"
            className={classnames(
              classes.commentFromMentor,
              "comment-from comment-from--mentor",
              previousTitleClass,
              recentTitleClass,
              shouldHaveClassName // <---- here
            )}>

Answer 2

您可以在renderComment内添加特殊样式

if (!comments || comments.count() <= 0) {
    return null;
}

return comments.map((comment, index) => {

    const style = {
        color: "red"
    }

    return (
        comment && (
            <React.Fragment key={index}>
            {this.renderComment(comment,index===0?style:null)}
          </React.Fragment>
        )
    );
});

Answer 3

只需将注释函数包装在div中，然后根据索引更改其类名。然后，您可以使用三元条件来决定要应用哪个类：

public render(): React.ReactNode {
    const { comments } = this.props;

    if (!comments || comments.count() <= 0) {
        return null;
    }

    return comments.map((comment, index) => {
        return (
            comment && (
                <React.Fragment key={index}>
                    <div className={index ? 'notFirst' : 'first'}>
                        {this.renderComment(comment)}
                    </div>
                </React.Fragment>
            )
        );
    });
}

如果愿意，您也可以将类名发送到this.renderComment：

comment && (
    <React.Fragment key={index}>
        {this.renderComment(comment, index ? 'notFirst' : 'first')}
    </React.Fragment>
)

并在renderComment函数中添加第二个参数，以允许您应用组件的className。

然后您可以根据以下类名称在CSS中应用不同的规则：

.first {
  color: black;
}

.notFirst {
  color: gray;
}

返回React组件索引中的第一项

3 个答案: