流程 - 缺少类型注释
Flow - missing type annotation
流程很新,正在尝试修复我的代码以包含流程。这是我目前的代码,我添加了流类型检查,但现在出现错误,因此我需要正确注释我的代码:
// @flow
import React, { Component } from 'react';
import { Manager, Reference, Popper } from 'react-popper';
import cx from 'classnames';
import css from './Tooltip.css';
import animationsCss from './TooltipAnimations.css';
type Props = {
theme: string,
eventsEnabled: boolean,
}
class Tooltip extends Component<Props> {
static defaultProps = {
theme: 'light',
eventsEnabled: true
};
firstOrderPlacement(placement) {
if (!placement) return null;
return placement.split('-')[0];
}
arrowDirectionClass(firstOrderPlacement) {
switch (firstOrderPlacement) {
case 'right':
return css.arrowLeft;
case 'left':
return css.arrowRight;
case 'top':
return css.arrowDown;
case 'bottom':
return css.arrowUp;
default:
return css.arrowUp;
}
}
render() {
const { placement, className, children, fadeIn, theme, eventsEnabled } = this.props;
return (
<Popper placement={placement} eventsEnabled={eventsEnabled}>
{({ ref, style, placement }) => {
const firstOrderPlacement = this.firstOrderPlacement(placement);
const arrowDirectionClass = this.arrowDirectionClass(firstOrderPlacement);
const subContainerStyle = {
display: 'flex',
flexDirection:
firstOrderPlacement === 'top' || firstOrderPlacement === 'bottom' ? 'column' : 'row',
};
const childrenContainerClassName = cx(
css.childrenContainer,
css.wrapper,
theme === "dark" ? css.dark : css.light
);
const content = <div className={childrenContainerClassName}>{children}</div>;
const subContainerClassName = fadeIn ? cx(animationsCss.fadeIn, className) : className;
return (
<div
ref={ref}
className={cx(css.container, css.mobileTooltip)}
style={style}
data-placement={placement}
>
<div className={subContainerClassName} style={subContainerStyle}>
{(firstOrderPlacement === 'left' || firstOrderPlacement === 'top') && content}
<div>
<div className={cx(css.arrow, arrowDirectionClass)} />
</div>
{(firstOrderPlacement === 'right' || firstOrderPlacement === 'bottom') && content}
</div>
</div>
);
}}
</Popper>
);
}
}
export { Manager as TooltipManager, Reference as TooltipReference, Tooltip };
我认为我需要将这些添加到我的道具中。这些正确吗?
placement: string,
className?: string,
children?: any,
fadeIn: any,
我缺少这两个的类型注释,我不确定如何继续:
firstOrderPlacement(placement) {..}
arrowDirectionClass(firstOrderPlacement) {..}
有什么帮助吗?
Are these correct?
试试看就知道了!
不过请记住,使用 any
是一种快捷方式,基本上只是关闭输入。对于 children
你期望反应元素的地方,你通常应该只使用 React.node
。如果您基本上想要任意嵌套的 DOM-like 内容,如反应元素、元素数组、文本字符串等,这将起作用。fadeIn
看起来像是 可能 一个字符串, 但如果不看它的来源就很难分辨。
I'm missing type annotation for these two which I'm not sure how to proceed:
Flow 希望您键入函数的参数。类似于:
firstOrderPlacement(placement: string) {
或其他什么。
注释Props
喜欢:
type Props = {
...
placement: string,
className?: string,
children?: any,
fadeIn: any,
...
}
Placement
参数是 string firstOrderPlacement(placement) {..}
和 return 函数的值是 null
或 string
,所以你可以使用 maybe type
进行注释:
firstOrderPlacement(placement: string): ?string => {...}
或联合类型,因为 maybe type
涵盖 undefined
。
type FirstOrder = string | null;
firstOrderPlacement
函数的结果是arrowDirectionClass
的参数。所以参数类型:
arrowDirectionClass(firstOrderPlacement: ?string): string => {...}
或:
arrowDirectionClass(firstOrderPlacement: FirstOrder): string => {...}
流程很新,正在尝试修复我的代码以包含流程。这是我目前的代码,我添加了流类型检查,但现在出现错误,因此我需要正确注释我的代码:
// @flow
import React, { Component } from 'react';
import { Manager, Reference, Popper } from 'react-popper';
import cx from 'classnames';
import css from './Tooltip.css';
import animationsCss from './TooltipAnimations.css';
type Props = {
theme: string,
eventsEnabled: boolean,
}
class Tooltip extends Component<Props> {
static defaultProps = {
theme: 'light',
eventsEnabled: true
};
firstOrderPlacement(placement) {
if (!placement) return null;
return placement.split('-')[0];
}
arrowDirectionClass(firstOrderPlacement) {
switch (firstOrderPlacement) {
case 'right':
return css.arrowLeft;
case 'left':
return css.arrowRight;
case 'top':
return css.arrowDown;
case 'bottom':
return css.arrowUp;
default:
return css.arrowUp;
}
}
render() {
const { placement, className, children, fadeIn, theme, eventsEnabled } = this.props;
return (
<Popper placement={placement} eventsEnabled={eventsEnabled}>
{({ ref, style, placement }) => {
const firstOrderPlacement = this.firstOrderPlacement(placement);
const arrowDirectionClass = this.arrowDirectionClass(firstOrderPlacement);
const subContainerStyle = {
display: 'flex',
flexDirection:
firstOrderPlacement === 'top' || firstOrderPlacement === 'bottom' ? 'column' : 'row',
};
const childrenContainerClassName = cx(
css.childrenContainer,
css.wrapper,
theme === "dark" ? css.dark : css.light
);
const content = <div className={childrenContainerClassName}>{children}</div>;
const subContainerClassName = fadeIn ? cx(animationsCss.fadeIn, className) : className;
return (
<div
ref={ref}
className={cx(css.container, css.mobileTooltip)}
style={style}
data-placement={placement}
>
<div className={subContainerClassName} style={subContainerStyle}>
{(firstOrderPlacement === 'left' || firstOrderPlacement === 'top') && content}
<div>
<div className={cx(css.arrow, arrowDirectionClass)} />
</div>
{(firstOrderPlacement === 'right' || firstOrderPlacement === 'bottom') && content}
</div>
</div>
);
}}
</Popper>
);
}
}
export { Manager as TooltipManager, Reference as TooltipReference, Tooltip };
我认为我需要将这些添加到我的道具中。这些正确吗?
placement: string,
className?: string,
children?: any,
fadeIn: any,
我缺少这两个的类型注释,我不确定如何继续:
firstOrderPlacement(placement) {..}
arrowDirectionClass(firstOrderPlacement) {..}
有什么帮助吗?
Are these correct?
试试看就知道了!
不过请记住,使用 any
是一种快捷方式,基本上只是关闭输入。对于 children
你期望反应元素的地方,你通常应该只使用 React.node
。如果您基本上想要任意嵌套的 DOM-like 内容,如反应元素、元素数组、文本字符串等,这将起作用。fadeIn
看起来像是 可能 一个字符串, 但如果不看它的来源就很难分辨。
I'm missing type annotation for these two which I'm not sure how to proceed:
Flow 希望您键入函数的参数。类似于:
firstOrderPlacement(placement: string) {
或其他什么。
注释Props
喜欢:
type Props = {
...
placement: string,
className?: string,
children?: any,
fadeIn: any,
...
}
Placement
参数是 string firstOrderPlacement(placement) {..}
和 return 函数的值是 null
或 string
,所以你可以使用 maybe type
进行注释:
firstOrderPlacement(placement: string): ?string => {...}
或联合类型,因为 maybe type
涵盖 undefined
。
type FirstOrder = string | null;
firstOrderPlacement
函数的结果是arrowDirectionClass
的参数。所以参数类型:
arrowDirectionClass(firstOrderPlacement: ?string): string => {...}
或:
arrowDirectionClass(firstOrderPlacement: FirstOrder): string => {...}