reactjs - Typescript hvordan man sender props i forældrekomponent

Jeg øver mig i TypeScript. Jeg får fejlen "Type 'void' kan ikke tildeles typen 'boolean'" på linjen setAuthenticated(valueFromChild) og "...kan ikke tildeles typen 'IntrinsicAttributes & { children?: ReactNode; }'" for alle steder, hvor jeg sender props til børnekomponenter her. Hvordan løser jeg fejlene?

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;

Svar #1

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

Du siger, at handleAuth skal returnere boolean. Men det at kalde setIsAuthenticated returnerer void. Du vil sandsynligvis bare gerne have, at handleAuth returnerer void. Eller du kan lade returtypen være og lade Typescript inferere den korrekt.

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

"...kan ikke tildeles typen 'IntrinsicAttributes & { children?: ReactNode; }'." for alle steder, hvor jeg sender props til underordnede komponenter her.

Det ser ud til, at dine komponenter Login og Register ikke accepterer nogen props. Accepterer de en handleAuth prop?

De bør defineres på en lignende måde som dette:

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

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

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

De props, som du sender fra (props) =>, er RouteComponentProps, som inkluderer match, location osv. Du kunne inkludere disse i prop-typen for dine Login og Register komponenter. Men hvis du ikke har brug for at bruge disse props i komponenten, kan du blot lade være med at sende dem.

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

Relaterede artikler