如何使用 TypeScript 为无状态、功能性 React 组件指定（可选）默认道具？

javascript typescript reactjs react-native

2022-08-30 05:28:10

我正在尝试在Typescript中创建一个具有可选道具和defaultProps的无状态React组件（对于React Native项目）。这对于vanilla 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) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

export default Test;

调用会按预期呈现“Sir Lancelot”，但当它应该输出“Mr. McGee”时，什么也没结果。<Test title="Sir" name="Lancelot" /><Test />

任何帮助都非常感谢。

答案 1

这里有一个类似的问题和答案：React with 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<TestProps> = (props) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

Test.defaultProps = defaultProps;

export default Test;

答案 2

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

例：

interface TestProps {
    title?: string;
    name?: string;
}

const Test = ({title = 'Mr', name = 'McGee'}: TestProps) => {
    return (
        <p>
            {title} {name}
        </p>
    );
}