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

Question

更新问题以澄清：我在这里要做的是对于索引 === 0 的每个实例，我想有条件地将黑色类（最近标题类）应用于排版文本。我正在通过 props 将两个 css 类 previousTitleClass 和 recentTitleClass 传递到组件中。现在我只想最近只用于数组的第一个实例的TitleClass。如果添加了新的注释/标题，则此数组会更改，因此标记为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(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;
}