如何在 React TypeScript 中实现 e 和 props?
Posted
技术标签:
【中文标题】如何在 React TypeScript 中实现 e 和 props?【英文标题】:How to implement e and props in React TypeScript? 【发布时间】:2020-07-28 19:11:45 【问题描述】:我有一个 JS 组件,我在其中定义了一些普通的 jsx 函数和状态,现在我想将它们用作 tsx 文件中的道具,但是因为我我是初学者,我很困惑。这是我想在 tsx 中实现的 js 版本:
export class FormUserDetails extends Component
continue = e =>
e.preventDefault();
this.props.nextStep();
;
render()
const values, handleChange = this.props;
return (
...
<AppBar title="Enter User Details" />
<TextField
placeholder="Enter Your First Name"
label="First Name"
onChange=handleChange('firstName')
defaultValue=values.firstName
margin="normal"
fullWidth="true"
/>
...
如何在 React TypeScript 中实现这一点:
export class MainInfo extends Component<Props,>
或类似的?
沙盒:它有我想要实现的 tsx 文件,就像我的问题示例和定义我的道具的 JS 文件 https://codesandbox.io/s/tsx-rj694
【问题讨论】:
你能粘贴完整的文件吗? @vjr12 codesandbox.io/s/tsx-rj694 我上传了我想实现的 tsx 文件,比如我的问题和包含我的道具的主 JS 文件 【参考方案1】:您需要为组件的 props 提供一个接口。对于FormUserDetails
的情况,您需要定义一个包含values
和handleChange
的接口或类型别名。
interface FormUserDetailsProps
values:
name: string; // include other required properties
;
handleChange: (value: string) => void;
export class FormUserDetails extends Component<FormUserDetailsProps>
// do the rest here
【讨论】:
【参考方案2】:您好,您可以通过这种方式为您的类组件创建类型
interface IProps
nextStep: () => void;
values:
firstName: string
;
handleChange: (value: string) => void
export class FormUserDetails extends Component<IProps>
continue = e =>
e.preventDefault();
this.props.nextStep();
;
render()
const values, handleChange = this.props;
return (
...
<AppBar title="Enter User Details" />
<TextField
placeholder="Enter Your First Name"
label="First Name"
onChange=handleChange('firstName')
defaultValue=values.firstName
margin="normal"
fullWidth="true"
/>
...
【讨论】:
【参考方案3】:但你也可以使用函数组件,因为它在使用 typescript 时更干净、更好、更易读:
interface IProps
nextStep: () => void;
handleChange: (value: string) => void
values:
firstName: string
;
const FormUserDetails = (props: IProps) =>
const values, handleChange, nextStep = props;
const continue = (e: any) =>
e.preventDefault();
nextStep();
;
return (
<AppBar title="Enter User Details" />
<TextField
placeholder="Enter Your First Name"
label="First Name"
onChange=handleChange('firstName')
defaultValue=values.firstName
margin="normal"
fullWidth="true"
/>
)
【讨论】:
以上是关于如何在 React TypeScript 中实现 e 和 props?的主要内容,如果未能解决你的问题,请参考以下文章
我想在辅助函数中操作 React 类组件中存在的状态。我想在 Typescript 中实现相同的目标