reactjs - Typescript hur man skickar props i föräldrakomponent

Jag övar på TypeScript. Jag har felet "Type 'void' is not assignable to type 'boolean'" för raden setAuthenticated(valueFromChild) och "...is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'." för alla ställen där jag skickar props till barnkomponenter här. Hur kan jag fixa felen?

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 säger att handleAuth måste returnera boolean. Men att anropa setIsAuthenticated returnerar void. Du vill förmodligen bara att handleAuth ska returnera void. Eller så kan du utelämna returtypen och låta Typescript härleda den korrekt.

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

"...kan inte tilldelas typen 'IntrinsicAttributes & { children?: ReactNode; }'." för alla ställen där jag skickar props till barnkomponenter här.

Det verkar som att dina komponenter Login och Register inte accepterar några props. Accepterar de en handleAuth-prop?

De bör definieras på ett liknande sätt:

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 skickar från (props) => är RouteComponentProps som inkluderar match, location, etc. Du kan inkludera dessa i propstypen för dina Login och Register-komponenter. Men om du inte behöver använda dessa props i komponenten kan du helt enkelt låta bli att skicka dem.

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

Relaterade artiklar