使用打字稿將自定義道具傳遞給反應組件

Question

我對 TypeScript 很陌生，我想知道是否有人可以給我一個這個 React 組件轉換為 TypeScript 的例子：

const Message = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

我試過這樣的事情：

const Message: React.FC = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

但它給了我錯誤：類型 '{children?: ReactNode; 上不存在屬性 'propertyName'。 }'。

Answer 1

interface Props {
  from: string;
  to: string;
}

const Message: React.FC<Props> = ({from, text}) => (
  <div>
    <p>{text}</p>
    <p>from: {from}</p>
  </div>  
);

你只需要讓 Typescript 知道組件的 props 是什么。