react-router 中嵌套路由中 "children" 的类型是什么？

Question

给定以下代码，"children" 的类型是什么？看起来它很可能只是 React.Component 但我不确定并且无法通过仔细阅读代码来解决这个问题。鉴于您可以在路线中使用 "components"，我不确定。

此外，由于编译器错误 "error TS2314: Generic type 'Component' requires 2 type argument(s)"，仅使用 React.Component 失败，所以也许我可以 React.Component<{}, {}>

export class App extends React.Component<{children}, {}> {
    public render() {
        return (
            <div>
                <h1>React Router Tutorial</h1>
                <ul role="nav">
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/repos">Repos</Link></li>
                </ul>

                {this.props.children}
            </div>
        );
    }
}

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
        </Route>
    </Router>
), document.getElementById('app'));

为了澄清，我还会以另一种方式提出这个问题：假设我想用以下内容替换第一行，我会给出什么类型 children，而不是 any

interface {
    children: /* ??? something besides any */ any
}

export class App extends React.Component<AppProps, {}> { /* ... */ }

Answer 1

看来正确的方法在 react-router.d.ts in DefinitelyTyped (Specifically, pay attention to line 83 2016 年 2 月 20 日的 10:08PM MST 中进行了演示，它定义了 RouterProps，这是众所周知的 Router 组件的等效 Props 接口.)

在 React 类型中，有一个 Props 接口，其中包含 React 组件标准的其他属性，children。

因此，代码示例转换为以下内容。特别注意顶部的界面。

interface AppProps extends React.Props<App> { }

export class App extends React.Component<AppProps, {}> {
    /* ... */
}

react-router 中嵌套路由中 "children" 的类型是什么？

What is the type of "children" in nested routes in react-router?

typescript

reactjs

react-router