使用Typescript开发react最佳实践(1)

组件Demo

1.将props直接拆解内层直接使用

import React from 'react';

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

const Demo: React.FC<Props> = ({ from, message }) => {

  return (
    <div>
      <p>来自{from}的消息</p>
      <p>{message}</p>
    </div>
  );

}
export default Demo;

2.不拆props

import React from 'react';

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

const Demo: React.FC<Props> = ( props ) => {

  const { from, message } = props;
  return (
    <div>
      <p>来自{from}的消息</p>
      <p>{message}</p>
    </div>
  );

}
export default Demo;

使用组件Demo

import Demo from './ListTableList/components/Demo';


<Demo message="你的typescript水平咋样了？" from="liuyunshengs" />