Question

关注并调整教程here，在尝试定义渲染某些HTML的函数时，我遇到了麻烦。

function Toolbar(props) {
    return (
        <div>
            <button onClick={() => props.onClick()}>Refresh</button>
        </div>
    );
}

在Typescript中出现这个错误，因为没有定义props。我理解为什么我会收到错误，但我错过的是props应该是什么类型？

我相信我应该可以在另一个组件中使用它：

function App() {
    return (
        <div>
            <Toolbar onClick={() => alert('hello world')}>Test</Toolbar>
        </div>
    );
}

props就是我指定的内容。这似乎证实了here：尽管这个链接并没有提到打字稿。所以，我的问题是：这个功能（将属性传递到函数或类中的功能）如何使用打字稿，根据定义，你不知道你经过的是什么？

Answer 1

您应该为道具定义一个界面。

interface Props {
   onClick: Function;
}

function Toolbar(props: Props) {
   return (
       <div>
           <button onClick={() => props.onClick()}>Refresh</button>
       </div>
   );
}

我也喜欢将我的功能组件定义为箭头功能。您可以将FC（功能组件）类型定义与Props泛型类型一起使用。这样您就可以立即解构您的房产。

const Toolbar: React.FC<Props> = ({onClick}) => {
   return (
       <div>
           <button onClick={() => onClick()}>Refresh</button>
       </div>
   );
}

ReactJS打字稿错误参数props隐含地有任何＆＃39;类型

1 个答案: