时间戳

首页 > 解决方案 > Typescript 导出默认值：React.FunctionComponent

reactjs - Typescript 导出默认值：React.FunctionComponent

问题描述

我将如何在打字稿中解决这个问题。我知道我可以给它一个名字，但这不是我要问的。我在问我怎样才能仍然使用默认值。

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps) => {
 ..... my code 
});

是的，我知道这件事。 

const MyComponent: React.FunctionComponent = () => {
...
export default MyComponent;

标签： reactjstypescript

解决方案

嗯，就像你有它，除了尾随)语法错误

import React from "react"

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps): JSX.Element => {
  return <p>hello { name }, some { tag }</p>
} // <- no trailing `)`

或者 -

import React from "react"

interface IProps {
  name: string,
  tag: string,
}

export default ({name, tag}: IProps): JSX.Element =>
  <p>hello { name }, some { tag }</p>

TypeScript Playground 演示

也就是说，命名函数要好得多，尤其是出于调试目的。

推荐阅读