高级React Typescript功能组件声明

Question

我对使用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} />

Answer 1

好吧，让我们深入研究：

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

1. DemoProps是道具的界面，而makeMapStateToProps是道具的界面。
2. 国家收到的道具被分解为props1和props2
3. 然后将这些道具传递给in render方法。