Question

鉴于以下代码，“孩子”的类型是什么？看起来它很可能只是React.Component，但我不确定，只是通过仔细阅读代码就无法解决这个问题。鉴于您可以在路线中拥有“组件”，我绝对不确定。

此外，由于编译器错误，仅使用React.Component失败“错误TS2314：通用类型'组件'需要2个类型参数”所以也许我可以做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 中展示了执行此操作的正确方法（具体来说，请注意{2016年2月20日下午10:08 MST定义的RouterProps时的line 83，众所周知的路由器组件的等效Props接口。）

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

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

interface AppProps extends React.Props<App> { }

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

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

1 个答案: