Question

我正在使用React Material UI Tooltip组件。具体来说：

render() {
    const {comment} = this.props;
    ...
    <Tooltip title={this.handleFlaggedComment(comment)}>
        <IconButton className={classes.tooltipIconButton} aria-label="Reported" href="">
            <ReportedIcon className={classes.reportedIcon} />
        </IconButton>
    </Tooltip>
    ...
}

handleFlaggedComment实现为：

handleFlaggedComment = (comment) => {
    return (
      <Fragment>
        <div>
           REPORTED COUNT&nbsp;:&nbsp;{comment.reportedCount}
        </div>
      </Fragment>
   )
}

我们还假设存在一个mapStateToProps，它实现为：

mapStateToProps(state) {
    return {
        comment: state.commentsList.currentComment
    }
}

当reportedCount从1变为3时，我将鼠标悬停在图标上以显示工具提示，我希望它显示3作为reportedCount。但是它只显示1，这是初始值

是否有一种方法可以使工具提示标题更新并显示更新后的注释，特别是正确的reportCount？

让我们还假设某些UI操作正在触发reportCount增加。例如，单击一个图标，将reportCountCount递增1，并在redux中更新“ currentComment”的状态

动态更新Material UI工具提示的标题组件

0 个答案: