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

Question

更新问题以澄清：我在这里尝试做的是对于索引 === 0 的每个实例，我想有条件地将黑色类 (recentTitleClass) 应用于排版文本。我通过道具将两个css类previousTitleClass和recentTitleClass传递到组件中。现在我只想将recentTitleClass 仅用于数组的第一个实例。如果添加了新的评论/标题，则此数组会发生变化，因此标记 previousTitleClass 和 recentTitleClass。

这是我目前所拥有的。

  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 函数中添加第二个参数，允许您应用组件的类名。

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

.first {
  color: black;
}

.notFirst {
  color: gray;
}