Question

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

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; }'不可分配给type 'IntrinsicAttributes＆{子代？：ReactNode; }'。属性“ isOpen” 类型'IntrinsicAttributes＆{children ?: ReactNode;上不存在 }'。ts（2322）

Answer 1

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

您可以通过界面进行操作，应该是这样的：（未经测试）

interface InterfaceName {
  isOpen: boolean
}

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

希望有帮助。

Answer 2

您需要声明LogoNavigation组件，以便它接受isOpen属性。为此，您可以定义一个接口或按以下方式进行操作

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

  return <div />;
}

TypeScript：将道具传递给孩子

2 个答案: