reactjs - typescript 如何在父组件中传递 Prop

Question

我正在练习 typescript 。对于 setAuthenticated(valueFromChild) 行，我有错误“类型 'void' 不能分配到类型 'boolean'”，并且“...不能分配到类型 'IntrinsicAttributes & { children?: ReactNode; }'。”对于我在这里将 Prop 传递给子组件的所有地方(，)。如何修复错误？

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;

Answer 1

const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
const handleAuth = (valueFromChild: boolean): boolean =>
    setIsAuthenticated(valueFromChild);

你是说 handleAuth必须返回 boolean .但是打电话 setIsAuthenticated返回 void .您可能只想制作 handleAuth返回 void .或者您可以不使用返回类型并让 Typescript 正确推断它。

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

"...is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'." for all places(,) where I pass props into child components here.

看起来你的组件 Login和 Register不接受任何 Prop 。他们是否接受 handleAuth支柱？
它们的定义应该类似于:

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

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

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

你传递过来的 Prop (props) =>是 RouteComponentProps其中包括 match , location等。您可以将这些包含在您的 Login 的 Prop 类型中。和 Register成分。但是如果您不需要在组件中使用这些 Prop ，那么您就可以不传递它们。

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