代码之家 › 专栏 › 技术社区 › noblerare

使用react功能组件作为类型

typescript reactjs javascript

noblerare · 技术社区 · 7 年前

我能够使用react类组件(即 React.Component )作为类型,但无法使用功能性/无状态组件。下面是一个例子:

import Footer from 'path/to/component/Footer';

interface ComponentProps {
    customFooter: (Footer)
}

class MyComponent extends React.Component<ComponentProps> {
    render() {
        return (
            <div>
                {this.props.customFooter}
            </div>
        );
    }
}

页脚.tsx

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

红色下划线在 (Footer) 内容如下: Cannot find name 'Footer' 是的。

我发现如果我使用react类组件而不是函数组件,我的问题就会消失。为什么我不能使用一个功能组件,我有办法这样做吗?

1 回复 | 直到 7 年前

jmattheis zzz 7 年前

页脚不是一种类型,它只是一个变量,用于获取可以使用的类型 typeof

const Footer: React.StatelessComponent<{ children?: any }> = ({ children }) => (
    <footer>
        <div>
            {children}
        </div>
    </footer>
);

interface ComponentProps {
    customFooter: typeof Footer    
}

然后你可以这样使用它:

class MyComponent extends React.Component<ComponentProps> {
    render() {
        const {customFooter: CustomFooter} = this.props;
        return (
            <div>
                {<CustomFooter>footer children</CustomFooter>}
            </div>
        );
    }
}

const MainComponent = () => {
    return (<MyComponent customFooter={Footer}/>)
};

如果要将实际的jsx元素添加为如下值:

const MainComponent = () => {
    return (<MyComponent customFooter={<Footer>footer children</Footer>}/>)
};

然后您需要将customfooter的类型设置为react.reactnode:

interface ComponentProps {
    customFooter: React.ReactNode
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前