Question

我正在使用Victory JS在React中创建图表。 Victory有一个名为<VictoryBar>的组件，可以使用名为labelComponent的道具，我正在通过<BarLabel/>。

示例：

<VictoryBar
  labelComponent={<BarLabel/>}
/>

问题是我使用Flow进行类型检查，VictoryBar将道具添加到<BarLabel/>。这是我的BarLabel道具类型和组件本身。我在评论中解释了这个问题。

type BarLabelProps = {
  style?: Object,
  x?: number,
  y0?: number,

  // The problem lies here. When datum is optional I get the flow error
  // that props.datum.name is invalid because .name cannot be accessed from a 
  // possibly null value. When it is required (no question mark) I get an error 
  // because when I pass the component to <VictoryBar /> it does not contain
  // the prop datum until VictoryBar does it's thing. 
  datum?: Object,
};

function BarLabel(props: BarLabelProps) {
  return (
    <text
      textAnchor="middle"
      style={props.style}
      x={props.x + 70}
      y={props.y0 + 15}
    >
      <tspan style={props.style}>
        {props.datum.name}
      </tspan>
    </text>
  );
}

流程文档提供了在高阶函数上指定道具的示例，但不能帮助我完成场景。 如何告知流量这些道具是通过VictoryBar添加的？

Answer 1

要支持项目中第三方库的流类型，可以使用flow-typed模块。他们的安装说明说要全局安装，例如yarn global add flow-typed或npm install -g flow-typed。

到目前为止，是Victory doesn't have any official Flow types defined，因此，一旦安装了此模块，您将需要创建一个存根来删除所用Victory版本的Flow错误。这可以通过flow-typed create-stub命令来完成，例如：

flow-typed create-stub victory@^30.3.0

这将生成将流类型声明为./flow-typed的文件。这将消除您与“胜利”相关的所有Flow错误。您可以了解有关声明流类型in the Flow docs的更多信息。

对于一般的第三方库，总是最好查看Flow类型是否已经存在，此时可以安装它们。这可以通过flow-typed install命令来完成，例如

flow-typed install bson@^1.0.0

对于现有的Flow类型，您还可以将声明从the existing definitions复制并粘贴到项目的./flow-typed目录中。

声明由第三方组件添加的道具的流类型

1 个答案: