refactor(Rating): upgrade to ts #4717
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Signed-off-by: Simba Luo <[email protected]>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
YSMJ1994
requested changes
Jan 19, 2024
| iconSpace: number; | ||
| iconSize: number; | ||
| clicked: boolean; | ||
| disabled: boolean; | ||
| } | ||
|
|
||
| export default class Rating extends React.Component<RatingProps, any> {} |
| @@ -52,7 +52,7 @@ export interface RatingProps extends HTMLAttributesWeak, CommonProps { | |||
| /** | |||
| * 用户hover评分时触发的回调 | |||
| */ | |||
| onHoverChange?: (value: number) => void; | |||
| onHoverChange?: (value?: number) => void; | |||
There was a problem hiding this comment.
虽然效果差不多，但是不是(value: number | undefined) => void更准确一点
| {overlay} | ||
| </div> | ||
| </div> | ||
| {showGrade ? ( | ||
| <div className={`${prefix}rating-info`} style={infoStyle}> | ||
| {readAs(value)} | ||
| {readAs ? readAs(value) : 0} |
There was a problem hiding this comment.
readAs在 defaultProps 内定义了默认值，这里直接 readAs!(value) 断言存在即可，不要改动原有逻辑
| className={`${prefix}rating-icon`} | ||
| > | ||
| {iconNode} | ||
| {enableA11y ? <span className={`${prefix}sr-only`}>{readAs(i + 1)}</span> : null} | ||
| {enableA11y ? ( | ||
| <span className={`${prefix}sr-only`}>{readAs ? readAs(i + 1) : 0}</span> |
There was a problem hiding this comment.
readAs在 defaultProps 内定义了默认值，这里直接 readAs!(i + 1) 断言存在即可，不要改动原有逻辑
| aria-checked={i + 1 === parseInt(hoverValue)} | ||
| checked={i + 1 === parseInt(hoverValue)} | ||
| aria-checked={i + 1 === Number(hoverValue)} | ||
| checked={i + 1 === Number(hoverValue)} |
There was a problem hiding this comment.
parseInt() 的效果跟 Number() 不一样，不要改动原有逻辑，有问题的类型通过断言、ts注释等方式注明
| iconRefs: React.RefObject<HTMLElement>[] = Array(this.props.count) | ||
| .fill(null) | ||
| .map(() => createRef()); | ||
| private spanRefs: React.RefObject<HTMLSpanElement>[] = []; |
|
|
||
| if (icon && this.underlayNode) { | ||
| if (this.iconRefs[0].current && this.underlayNodeRef.current) { | ||
| const icon = this.iconRefs[0].current; |
There was a problem hiding this comment.
不需要修改原有逻辑，只做类型补全，你这里完全可以
const icon = (this as unknown as Record<string, HTMLSpanElement | null>)['refs-rating-icon-0']
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| const state = {}; | ||
| static getDerivedStateFromProps(nextProps: RatingProps, prevState: any) { | ||
| const state: any = {}; |
| @@ -130,14 +65,15 @@ class Rating extends Component { | |||
| iconSpace: 0, | |||
| iconSize: 0, | |||
| clicked: false, // 标记组件是否被点击过 | |||
| disabled: false, | |||
| @@ -19,80 +21,13 @@ const ICON_SIZE_MAP = { | |||
| }; | |||
|
|
|||
| /** Rating */ | |||
| class Rating extends Component { | |||
| static propTypes = { | |||
|
@TATATATATAT 麻烦及时跟进一下 review comments |
|
Stale |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade rating component to ts