这是什么类型的语法,它是什么意思? '变量?:价值'

时间:2017-08-31 18:50:27

标签: javascript reactjs ecmascript-6

这里是一些使用?符号

的代码示例
export type Props = {
  /**
   * The CSS class name of the scroll button elements.
   */
  buttonClassName?: string,
}

tabs: ?HTMLElement = undefined;

2 个答案:

答案 0 :(得分:4)

这似乎是flow使用的内容:这意味着tabsbuttonClassName是可选的(即允许undefined)。有关详细信息,请参阅docs。他们还有一个example与React一起使用。

答案 1 :(得分:1)

这用于使用Flow的javascript / react组件的类型转换。

让我们来看看你的例子

export type Props = {
  buttonClassName?: string,
}

导出这些道具(主要用于按钮类)。这意味着对于某些按钮组件,buttonClassName的prop是一个可选参数(由于?),其数据类型是一个字符串。如果没有?开发环境中会抛出警告。

另一个例子如何使用

type ButtonProps = {
  label: string,
  onClick: Function,
  styleClass?: {[key: string]: string}
};

class ButtonComponent extends Component<ButtonProps> {
... other code

}

现在,如果您在代码中使用<ButtonComponent />,则必须执行

<ButtonComponent 
  label="Confirm"
  onClick={someClickHandlerFunction}
  styleClass={a style object}
/>

现在注意道具中的styleClass。语法意味着它将是一个对象,而问号意味着它是可选的。这样就可以避免在开发由于未定义的对象等而可能出现的大量错误时。

<ButtonComponent 
  label="Confirm"
  styleClass={a style object}
/>

这会发出警告,因为onClick prop尚未通过。这样你就可以消除很多可能的错误。

我建议使用Atom Plugin for Flow,它会在您开发时对代码进行修改。