TypeScript：将道具传递给孩子答案

【问题标题】：TypeScript: passing props to childrenTypeScript：将道具传递给孩子
【发布时间】：2020-08-08 01:05:52
【问题描述】：

您好，我对如何将道具传递给孩子有疑问：

interface RootState {
  sideIsOpen: boolean;
  isOpen: boolean;
}

const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideIsOpen;
  const sideIsOpen = useSelector(selectIsOpen);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideIsOpen} />
    </SideNav>
  );
};

和我的孩子们：

const LogoNavigation: React.FC = (props) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  );
};

我收到了这个错误：

类型 '{ isOpen: boolean; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。属性'isOpen' 'IntrinsicAttributes & { children?: ReactNode; 类型上不存在 }'.ts(2322)

【问题讨论】：

你能提供一些LogoNavigation的信息吗？
可能isOpen 不是LogoNavigation 的属性。
我想通过 isOpen 到 LogoNavigation

标签： reactjs typescript

【解决方案1】：

您应该声明您的LogoNavigation 组件期望获得isOpen。

你可以用界面来做，应该是这样的：（它没有测试过）

interface InterfaceName {
  isOpen: boolean
}

const LogoNavigation: React.FC<InterfaceName> = ({isOpen}) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  )
}

希望对你有帮助。

【讨论】：

您好，我已经这样做了，但是由于某种原因，我使用此状态在组件中启用了两种类型的样式，但由于某种原因它不起作用，您能看看这个问题吗？ stackoverflow.com/questions/61427095/…

【解决方案2】：

您需要声明 LogoNavigation 组件，以便它接受 isOpen 属性。为此，您可以定义一个接口或像下面那样做

function LogoNavigation(props: { isOpen: boolean }) {

  return <div />;
}

【讨论】：

不要在 isOpen 和 LogoNavigation 上出现同样的错误
Type '(props: RootState) => JSX.Element' 不可分配给 type 'FC'。参数 'props' 和 'props' 的类型不兼容。类型 '{ children?: ReactNode; }' 缺少“RootState”类型的以下属性：LogoNavigation 上的 sideIsOpen、isOpents(2322)
并输入 '{ isOpen: boolean; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“isOpen” }'.ts(2322)