当前位置: 首页 > 面试题库 >

如何为打字稿中的无状态反应组件定义defaultProps?

满伟彦
2023-03-14
问题内容

我想defaultprops为我的纯功能组件定义,但出现类型错误:

export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    toolbarItem?: JSX.Element;
    title?: string;
}

const Page = (props: PageProps) => (
    <div className="row">
        <Paper className="col-xs-12 col-sm-offset-1 col-sm-10" zDepth={1}>
            <AppBar
                title={props.title}
                zDepth={0}
                style={{ backgroundColor: "white" }}
                showMenuIconButton={false}
                iconElementRight={props.toolbarItem}
            />
            {props.children}
        </Paper>
    </div>
);

Page.defaultProps = {
    toolbarItem: null,
};

我知道我可以这样写:

(Page as any).defaultProps = {
    toolbarItem: null,
};

有没有更好的添加方法defaultProps


问题答案:

您可以这样输入Page

const Page: StatelessComponent<PageProps> = (props) => (
    // ...
);

然后,你可以写Page.defaultProps,而无需强制转换any的类型(defaultPropsPageProps)。



 类似资料:
  • 我的代码: 错误消息来自TypeScript(3.0)编译器: TS2322:类型“string[]”不可分配给类型“[string, string, string, string, string, string, string]”。“string[]”类型中缺少属性“0”。 如果我将字符串[]更改为只读数组 TS2322:“ReadonlyArray”类型不能分配给类型“[string,stri

  • 问题内容: 我不知道我是否正确地执行了操作…如果要从输入中获取值,请使用this.refs.whatever.value.trim(),但是如果该输入是无状态函数组件,我该怎么办检索值onSubmit? 我知道这在研究之后是不正确的,但是您应该如何从这些输入字段中获取价值? 这是无状态输入字段 问题答案: 编辑:看起来这不再是问题,因为自编写此答案以来出现了有关如何处理这种情况的新想法。请参阅in

  • 我有以下代码: 我遇到一个错误,指向.find并说: “字符串”类型的变量中不存在属性find。我知道错误在说什么,但是我如何将< code>$modal定义为一个我可以使用< code >的变量。查找于? 同样,现在我在typescript世界里,有没有更好的方法来定义modal,而不是在这里将它定义为var?

  • 问题内容: 我希望能够实例化一个Typescript类,在运行时可以获取该类和构造函数的详细信息。我想编写的函数将包含类名和构造函数参数。 问题答案: 您可以尝试: 编辑 此版本可在TypeScript操场上使用,例如:

  • 我正在尝试为现有的无状态 React 组件套件创建类型定义,这样我就可以自动生成文档并改进团队工具中的智能感知。 组件示例如下所示: 我的组件.js 我希望我的类型定义为: 定义哪些道具是允许的(哪些是必需的) 它将返回JSX 查看这个使用TypeScript创建React组件的示例,我发现了类型:< code>React。SFC。 我试着在我的定义中使用这个: 索引.d.ts 但是我收到 我对T