将React-Typescript中的函数属性从父级传递到子级

Question

类型，并尝试使用Type-React从Parent到Child，得到一个错误，我已经看过了，但无济于事"Type 'void‘is not assignable to Type’Function‘“。

父级

import React from "react";
import Navbar from "./navbar";
import Main from "./main";

function App() {
  const [page, setPage] = React.useState("main");

  let pageView = null;
  switch (page) {
    case "main":
      pageView = <Main />;
      break;

    case "about":
      break;

    case "portfolio":
      break;

    default:
      pageView = <Main />;
      break;
  }

  const changePage = (page: string) => {
    setPage(page);
  };

  let nav = <Navbar pageView={pageView} changePage={changePage(page)}/>;

  return (
    <React.Fragment>
      {nav}
      {pageView}
    </React.Fragment>
  );
}

export default App;

​

孩子

​

import React from "react";

interface Props {
  pageView: any;
  changePage: Function
}

const navbar = (props: Props) => {
  return (
    <nav className='navbar'>
      <ul className='navbar-nav'>
        <li className='nav-item' id='themeButton'>
          <a href='#' className='nav-link'>
            <span className='link-text'>Home</span>
          </a>
        </li>

        <li className='nav-item' id='themeButton'>
          <a href='#' className='nav-link'>
            <span className='link-text'>Portofolio</span>
          </a>
        </li>

        <li className='nav-item' id='themeButton'>
          <a href='#' className='nav-link'>
            <span className='link-text'>About</span>
          </a>
        </li>
      </ul>
    </nav>
  );
};

export default navbar;

​

所以我想给孩子道具函数changePage，我通常是在Javascript React上这样做的，但是打字，然后看了一下就迷惑了。谢谢你的帮助。

Answer 1

这是因为，在父组件中，传递的不是函数(changePage)，而是它的返回值。

改变这一点

let nav = <Navbar pageView={pageView} changePage={changePage(page)}/>;

至

let nav = <Navbar pageView={pageView} changePage={changePage}/>;