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

标签 reactjs typescript react-router-dom

我正在练习 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;

最佳答案

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.


看起来你的组件 LoginRegister不接受任何 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} />}

关于reactjs - typescript 如何在父组件中传递 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66718406/

相关文章:

javascript - 如何仅在收到 props 时渲染 React(使用 Redux)组件?

javascript - AMD 模块整形 : How to load only one JS function?

angular - 错误错误 : The requested path contains undefined segment at index 1

javascript - 在功能组件中使用 useParams 钩子(Hook)获取 id - react router dom v6

javascript - 路径和向其传递 Prop 的问题(带有 map 的组件)

javascript - Redux:根据交叉 reducer 状态调度操作

reactjs - React-Table 获取特定行的数据

javascript - 访问内联 SVG

javascript - 如何使用 angular cli 默认试运行

javascript - BrowserRouter 导致无效的钩子(Hook)调用。 Hooks 只能在函数组件的主体内部调用