时间戳

首页 > 解决方案 > 高级 React Typescript 功能组件声明

reactjs - 高级 React Typescript 功能组件声明

问题描述

我对带有 React 的 Typescript 比较陌生：我已经构建了一些较小的应用程序来准备开始新工作，但我有点卡在下面的代码上。有人可以解释一下 FunctionComponent 声明中发生了什么吗？

import * as React from 'react';
import {createStructuredSelector} from 'reselect';

const makeMapStateToProps = () =>
    createStructuredSelector({
        selectedLinkUrl:'someURL',
        selectedLinkComponentId: 'someID'
    });


interface DemoProps {
  name?: string;
}

const SomeComponent: React.FunctionComponent<DemoProps &
    ReturnType<ReturnType<typeof makeMapStateToProps>>> = ({
    prop1, prop2
}) => <div prop1={prop1} prop2={prop2} />

标签： reactjstypescript

解决方案

好的，让我们深入研究一下：

const SomeComponent: React.FC<DemoProps &
    ReturnType<ReturnType<typeof makeMapStateToProps>>> = ({
    prop1, prop2
}) => <div prop1={prop1} prop2={prop2} />
  1. DemoProps是道具的界面，makeMapStateToProps也是状态的界面。
  2. state 收到的 props 被解构为 props1 和 props2
  3. 然后将这些道具传递给 in render 方法。

推荐阅读