Reactjs Typescript如何在父组件中传递道具

我在练习打字。对于setAuthenticated（valueFromChild）行，我有错误“Type'void'不可分配给Type'boolean'”；对于我在此处将道具传递到子组件的所有位置（，），我有错误“…不可分配给Type'intrinsicatAttributes&{children？：ReactNode；}”。如何修复错误

import { FunctionComponent, useState } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './Components/navbar.component';
import './App.css';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './Theme/theme';
import Login from './Components/login.component';
import Register from './Components/register.component';

const App: FunctionComponent = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const handleAuth = (valueFromChild: boolean): boolean =>
    setIsAuthenticated(valueFromChild);
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Navbar isAuthenticated={isAuthenticated} />
        <Switch>
          <Route
            exact
            path="/login"
            render={(props) => <Login {...props} handleAuth={handleAuth} />}
          />
          <Route
            exact
            path="/register"
            render={(props) => <Register {...props} handleAuth={handleAuth} />}
          />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
};

export default App;

从'react'导入{FunctionComponent，useState}；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“./Components/Navbar.component”导入导航栏；
导入“/App.css”；
从'@material ui/core/styles'导入{ThemeProvider}；
从“./theme/theme”导入主题；
从“./Components/Login.component”导入登录名；
从“./Components/Register.component”导入寄存器；
常量应用程序：FunctionComponent=（）=>{
const[isAuthenticated，setIsAuthenticated]=useState（false）；
常量handleAuth=（valueFromChild:boolean）：boolean=>
setIsAuthenticated（valueFromChild）；
返回(
}
/>
}
/>
);
};
导出默认应用程序；

“…不可指定为键入'IntrinsicattAttributes&{children？：ReactNode；}.”用于我在此处将道具传递到子组件的所有位置（，）

您的组件

登录

和

注册

似乎不接受任何道具。他们是否接受

handleAuth

prop

它们的定义应与此类似：

export interface AuthProps {
  handleAuth: (value: boolean) => void;
}

export const Login: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

export const Register: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

---

谢谢你，琳达。

const handleAuth = (valueFromChild: boolean): void =>
    setIsAuthenticated(valueFromChild);

export interface AuthProps {
  handleAuth: (value: boolean) => void;
}

export const Login: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

export const Register: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

render={() => <Login handleAuth={handleAuth} />}