首页 文章

如何使用包含动作的组件？获取错误“类型'{}'不能分配给'IntrinsicAttributes'

提问于
浏览 次
1

我试图让我的组件有一些道具操作来做它的东西（例如用户最终通过弹出窗口登录）：

import { Component } from 'react';
import * as React from 'react';
import { connect } from 'react-redux';


class Props
{
    dostuff()
    {

    }
}

export class Test extends Component<Props, {}> {
    public render() {
        return (<div>lol</div>);
    }
}

在我的layouts.tsx中，我尝试这样做：

import * as React from 'react';
import { NavMenu } from './NavMenu';
import { Test } from '../test/test'
import { Component } from 'react';

export class Layout extends React.Component<{}, {}> {
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                </div>
                <div className='col-sm-9'>
                    <Test />
                    {this.props.children}
                </div>
            </div>
        </div>;
    }
}

然而看起来反应不喜欢我在道具中的动作..

[at-loader]中的错误./ClientApp/components/Layout.tsx:16:21 TS2322：类型'{}'不能分配给'IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly <{children？：ReactNode; }>＆Read ...' . 类型“{}”不能分配给“Readonly”类型 . 类型“{}”中缺少属性“dostuff” .

我的道具通常只是字符串或布尔，我没有问题，如何使它与函数一起使用？如果这不可能，我可以把它放在组件的其他地方吗？

reactjs typescript react-redux

1 回答

  • 3

    问题是React非常喜欢你在道具中的动作，但是你没有在 <Test/> 提供一个 . 如果您将方法 dostuff 添加到 Layout 并使用 <Test dostuff={this.dostuff}/> ，它应该可以工作 . 此外，您可能希望声明一个接口 Props 而不是类，因为您只想在那里声明类型 .

    回复于

相关问题