Question

我正在使用ES6 Classes编写React组件，而我的props之一可以是string或<div>。

如何告诉Flow <div>是否可以接受？

目前：

import React from 'react'

type Props = {
  title: string,
  content: string | // <- or a div
};

export class ThisComponent extends React.Component {
// ...

Answer 1

您可以使用全局类型React$Element

type Props = {
  title: string,
  content: string | React$Element<any>
};

AFAIK您不能仅限于div但

<ThisComponent title="mytitle" content={<div/>} /> // <= ok
<ThisComponent title="mytitle" content={<a/>} />   // <= ok as well

Answer 2

对于未来的旅行者，我认为<div>的客流类型为HTMLDivElement。

例如，在上述情况下，您需要字符串或div：

type Props = { content: string | HTMLDivElement, };

Answer 3

您应该使用React.PropTypes.node：

任何可以渲染的东西：数字，字符串，元素或者包含这些类型的数组（或片段）。

然后只需在您的组件中使用它：

render() {
  return (
    <div className="myComponent">
      <h3>My super component</h3>
      <div className="content">
        {this.props.content}
      </div>
    </div>
  );
}

所以在你的组件声明之后：

ThisComponent.propTypes = {
  content: React.PropTypes.node,
  title: React.PropTypes.string,
};

如何在Flow中将prop类型定义为<div>？

3 个答案: