时间戳

首页 > 解决方案 > Typescript 和 React：在 React 中初始化 RouteComponentProps 成员

reactjs - Typescript 和 React：在 React 中初始化 RouteComponentProps 成员

问题描述

我目前正在学习 Typescript 和 React，并且目前坚持能够正确访问道具的“匹配”成员。更具体地说，我在初始化从 RouteComponentProps 接口实现的变量时遇到了麻烦。

为简化起见，我有以下 3 个文件，并且相应的组件（路径 *）只是呈现带有文本的标题：

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('roots')
);

应用程序.tsx

import React from 'react';
import {BrowserRouter as Router, Route, Switch, RouteComponentProps} from 'react-router-dom';

import Path1 from './Path1';
import Path2 from './Path2';
import Nav from './Nav'

class App extends React.Component<RouteComponentProps> {
  render(): JSX.Element{
    return (
      <Router>
        <div className="App">
          <Nav history={this.props.history} location={this.props.location} match={this.props.match}/>
          <Switch>
            <Route path="/" exact component={Home} name="Home"/>
            <Route path="/path1" exact component={Path1} name="path1"/>
            <Route path="/path2" exact component={Path2} name="path2"/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App

导航.tsx

import React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';

class Nav extends React.Component<RouteComponentProps>{
  render(): JSX.Element {
    return (
      <div className="Nav">
        {this.props.match.path}
        <ul className="NavLinks">
          <Link to="/">
            <li>Home</li>
          </Link>
          <Link to="/Path1">
            <li>Path1</li>
          </Link>
          <Link to="/Path2">
            <li>Path2</li>
          </Link>
        </ul>
      </div>
    );
  }
}

基本思想是，在单击每个链接时，Nav 组件仅根据用户所在的页面更新页面顶部的文本。我之所以将导航条码放在原来的位置，是因为将来添加更多路线时可以节省时间。

问题
我的问题是我需要在 index.tsx 中传递初始道具，但是我似乎找不到有关如何初始化接口 RouteComponentProps 中的道具的任何信息。或者，如果我做错了（或代码中的任何其他内容），请告诉我。当谈到反应/打字稿时，我是新手，我想第一次学习正确的方法，不要重新实施坏习惯。

标签： reactjstypescriptreact-routerreact-component

解决方案

关于做得更好，我建议使用功能组件而不是类组件。

功能组件也可以让你使用反应钩子。你可以得到location,history和match从钩子：

interface MatchParams {
  name: string
}

const App = (): React.ReactElement => 
  const history = useHistory()
  const location = useLocation()
  const match = useRouteMatch<MatchParams>()

  return (
    <Router>
      <div className="App">
        <Nav history={history} location={location} match={match} />

推荐阅读