Question

我有一个类似函数的例子，我知道如何使用PropTypes来设置道具的类型并给它们提供默认值，但是我的团队使用的是打字稿，所以我必须知道如何使用打字稿来获得道具，我尝试了搜索答案，但我没有得到确切答案，有人知道该怎么做？

示例：

const List = ({title,showTitle,buttonText,onClickButton,itemText}) =>
  <div>
    { showTitle &&
      <Typography
        variant="body1"
        color="textSecondary"
        align="left"
      >
        {title}
      </Typography>
    }
    <ListItem button={false}>
      <ListItemIcon>
        <IconVideocam />
      </ListItemIcon>
      <ListItemText primary={itemText} />
      <ListItemIcon>
        <Button
          id={"Button"}
          onClick={onClickButton}
          color="primary"
        >
          { buttonText }
        </Button>
      </ListItemIcon>
    </ListItem>
  </div>

export default List

Answer 1

您可以使用React.SFC类型来声明无状态React组件的道具，如下所示：

// Props.
interface Props {
  buttonText: string  
  itemText: string
  showTitle: boolean
  onClickButton: () => void
  title: string
}

// List.
const List: React.SFC<Props> = props => <div> .. </div>

我如何在函数组件中使用TypeScript进行类型限制和默认值

1 个答案: