更改界面中的状态道具 - React

Question

我在接口中有一个布尔值。我用它来改变侧边栏的一些 CSS。

我想要一个按钮来改变道具的状态sidebarOpen

这是我的尝试：

interface ISidebar {
  logout?: boolean;
  sidebarOpen?: boolean;
}

class Sidebar extends Component<ISidebar> {
  render() {
    const handleSidebar = () => {
      this.props.sidebarOpen ? this.props.sidebarOpen(false) : this.props.sidebarOpen(true);
    };

 return (
   [...]
     <button onClick={handleSidebar} className="buttonSideBar">-</button>
   [...]

这个handleSidebar方法不行。我有一个打字稿错误：Type 'Boolean' has no call signatures.

知道我如何才能完成这项工作吗？

Answer 1

你的接口签名（更具体地说是 sidebarOpen? boolean; 部分）说 sidebarOpen 属性是一个可选的布尔值（即它是 true、false、或 undefined).

布尔值不是函数。

然后在您的 const handleSidebar 函数中，您尝试将 this.props.sidebarOpen 作为函数调用，并使用布尔值。

更具体地说，您尝试将其用作布尔值和函数。

您在执行 this.props.sidebarOpen ? ... : ... 语句时将其用作布尔值。然后，在每个分支中，您尝试将相同的属性 作为函数 调用。如果该 prop 是布尔值，则不能将其作为函数调用。

我猜你需要一些额外的道具，它是一个可以打开侧边栏的功能。

它可能看起来像这样：

interface ISidebar {
    logout?: boolean;
    sidebarOpen?: boolean;
    openSidebar: (a: boolean) => void;
}

...然后在后面的代码中：

this.props.sidebarOpen ? this.props.openSidebar(false) : this.props.openSidebar(true);

我不知道你的特定程序的细节，但我知道你不能使用相同的道具作为布尔值来检查状态和一个函数时间。

更改界面中的状态道具 - React

Change state prop in Interface - React

reactjs

typescript

interface