通过 onClick (TypeScript) 单击功能组件时设置反应状态

Question

const NavBar = () => {
    const [active, setActive] = useState<string>("tasks");

    return {
        <Container>
            <MenuLink onClick=(() => setActive("settings")/>
            <MenuLink onClick=(() => setActive("tasks")/>
            <MenuLink onClick=(() => setActive("wallets")/>
        </Container>
    }

MenuLink.tsx:

interface MenuLinkProps {
  $active: boolean;
  to: string;
  title: string;
}

function MenuLink({ $active, to, title, ...rest }: MenuLinkProps) {
  return (
    <Container $active={$active} to={to} {...rest}>
      {title}
    </Container>
  );
}

interface ContainerProps {
  $active: boolean;
  to: string;
}

const Container = styled(Link)<ContainerProps>`
  width: 70px;
  height: 35px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 3px;

  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.025em;

  text-decoration: none;

  color: ${({ $active }: ContainerProps) => ($active ? "#4C6C94" : "#908E87")};
  background: ${({ $active }: ContainerProps) => ($active ? "#1D232B;" : "#100F0D")};

  &:not(:first-child) {
    margin-left: 24px;
  }
`;

我想在单击 MenuLink 项时触发 setActive。但是，TypeScript 抱怨我没有 onClick 作为 MenuLinkProps 中的属性。我不确定这是否正确，因为当我将 onClick 作为属性时，我收到此错误：

Cannot update a component (`NavBar`) while rendering a different component (`MenuLink`). To locate the bad setState() call inside `MenuLink`, follow the stack trace as described in

我不太确定应该如何在自定义组件中使用 onClick（和其他标准“道具”）。

Answer 1

您可以将 NavBar 的界面更改为

interface MenuLinkProps {
  $active: boolean;
  to: string;
  title: string;
  [key : string] : any
}

接受任何静止的道具这不会修复您的错误，请提供您在哪里以及如何使用 $active

Answer 2

因此，您必须将父级点击方法作为道具传递给子级

父组件：

const NavBar = () => {
  const [active, setActive] = useState<string>("tasks");


  var menuOnClick: (action:string) => {setActive(action)};


  return {
    <div>
      <Container>
          <MenuLink onClick=(this.menuOnClick} />
          <MenuLink onClick=(this.menuOnClick} />
          <MenuLink onClick=(this.menuOnClick} />
      </Container>
    </div>
  }
}

子组件：

<Container $active={$active} to={to} {...rest} onClick ={() => this.props.onClick(title)} >
{title}
</Container>

通过 onClick (TypeScript) 单击功能组件时设置反应状态

setting react state when clicking on a functional component via onClick (TypeScript)

typescript

reactjs

react-hooks