Question

我正在用打字稿学习React-Router并遇到打字问题。

我在旧版本的react和react-router上运行。我已经更新到最新版本的yarn。

import * as ReactDOM from "react-dom";
import AppRouter from "./routers/app-router";

ReactDOM.render(AppRouter, document.getElementById("app"));

import {
  Route,
  Link,
  BrowserRouter,
  Switch,
  NavLink
} from "react-router-dom";

const MainPage = () => <div>This is my mainpage.</div>;


const Header = () => (
  <header>
    <h1>Hello</h1>
    <NavLink to="/" activeClassName="is-active" exact={true}>
      Main
    </NavLink>
  </header>
);

const AppRouter = ()  => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={MainPage} exact={true} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

据我了解，ReactDOM.render（）包含2个元素。我的const AppRouter是Element类型的。为什么我从ReactDOM.render（）中收到类型错误？

Answer 1

ReactDOM.render(<AppRouter/>, document.getElementById("app"));

这应该可以解决问题，让我知道是否，问题是AppRouter并不是有效的React.ReactElement，直到通过React.createElement调用构造了它，这是使用JSX语法时在幕后发生的情况

<AppRouter/>现在将变成React.createElement(ApppRouter);，它将返回正确的类型React.ReactElement;

如何解决：ReactDOM.render（）-TS2345：类型'（）=>元素'的参数不能分配给类型'ReactElement'

1 个答案: