使用打字稿将自定义道具传递给反应组件

Question

I am pretty new to TypeScript and I am wondering if someone can give me an example of this React component converted to TypeScript:

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

I have tried somethinig like this:

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

but it gives me the error: Property 'propertyName' does not exist on type '{ children?: ReactNode; }'.

Answer 1

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

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

You just need to let Typescript know what the props for the component are.