尝试触发状态更改函数时出错答案

【问题标题】：Getting an error when trying to trigger a function for state change尝试触发状态更改函数时出错
【发布时间】：2015-11-17 16:50:21
【问题描述】：

我正在尝试为模式编写反应组件并在调用 openModal() 时收到错误：“未捕获的 TypeError：this.setState 不是函数”。以下是我的代码：

class Header {

  constructor() {
      this.state = { showModal: false };
  } 

  openModal() {
      this.setState({showModal: true});
  }

  closeModal() {
      this.setState({showModal: false});
  }

  render() {
    return (
      <div className="Header">
        <ModalDialog heading="heading" show={this.state.showModal}>
          <p>Body</p>
        </ModalDialog>
        <div className="Header-container">
          <Navigation className="Header-nav" />
          <div className="Navigation2">

            <Button bsStyle='primary' onClick={this.openModal.bind(this)}>Sign in</Button>

            <Button bsStyle='info' href="/register" onClick={Link.handleClick}>Sign up</Button>

          </div>
        </div>
      </div>
    );
  }

}

class ModalDialog {

  render() {
    if (this.props.show) {
        return (
        <div className="Overlay">
          <Modal heading={this.props.heading}>
            <div>{this.props.children}</div>
          </Modal>
        </div>
      );
    }
    return null;
  }
};

class Modal {

  render() {
    return (
      <div className="Modal effect">
        <h3>{this.props.heading}</h3>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
};

我还试图将一个类名从 Header 组件传递到元素 <div className="Modal effect"> 以更改 Modal 的尺寸，这可能吗？

如果有人能帮我解决这个问题，那就太好了。我刚刚开始使用 React。谢谢

【问题讨论】：

我设法修复它，必须在代码上方添加 super()。但是关于将类传递给组件。有解决办法吗？谢谢

标签： javascript css reactjs

【解决方案1】：

我也在尝试从 Header 组件中传入一个 className 到元素中来改变 Modal 的尺寸，这可能吗？

这通常是 props 的用途，传递这样大小的静态信息。因此，只需将您的 class/size/staticprops 作为 prop 传递，如下所示：

<ModalDialog size={//whatever you need} className="Modal effect"/>

从 ModalDialog 传递给 Modal

<Modal size={this.props.size} />

然后你只需要在你的 Modal 中使用它来实现你想要的任何目的。更多关于一般道具的信息：https://facebook.github.io/react/docs/transferring-props.html

希望对你有帮助

【讨论】：

【解决方案2】：

我不熟悉 reactJS，但这对我来说似乎是错误的：

constructor() {
      this.state = { showModal: false };
}

应该是：

constructor() {
      this.setState = ({ showModal: false });
}

否则，您的 Header 类会将其状态属性设置为 { showModal: false }

显然没有'setState'成员函数。

【讨论】：