如何为无状态函数式React组件使用TypeScript指定（可选）默认属性？

27 浏览
0 Comments

如何为无状态函数式React组件使用TypeScript指定（可选）默认属性？

我正在尝试使用TypeScript创建一个有可选属性和defaultProps的无状态React组件（用于React Native项目）。这在普通JS中很简单，但我不知道如何在TypeScript中实现它。

通过以下代码：

import React, { Component } from 'react';
import { Text } from 'react-native';
interface TestProps {
    title?: string,
    name?: string
}
const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}
const Test = (props = defaultProps) => (
    
        {props.title} {props.name}
    
);
export default Test;

调用将按预期呈现\"Sir Lancelot\"，但则没有输出，而应输出\"Mr McGee\"。

非常感谢任何帮助。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

我发现最简单的方法是使用可选参数。请注意，defaultProps 最终将在函数组件上弃用。

例如：

interface TestProps {
    title?: string;
    name?: string;
}
const Test = ({title = 'Mr', name = 'McGee'}: TestProps) => {
    return (
        

            {title} {name}
        

    );
}

0
0 Comments

这里有一个类似的问题和答案：React和TypeScript - 在无状态函数中定义defaultProps

import React, { Component } from 'react';
import { Text } from 'react-native';
interface TestProps {
    title?: string,
    name?: string
}
const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}
const Test: React.SFC = (props) => (
    
        {props.title} {props.name}
    
);
Test.defaultProps = defaultProps;
export default Test;

0