Javascript React中的Bootstrap模型

我正在尝试根据说明在React中创建引导模式

我创建了一个包含以下内容的新类

class Button extends React.Component {
  state = {
    isShowingModal: false
  }
  openModal = () => {
    this.setState({isShowingModal: true});
  }
  render() {
    return (
      <a onClick={this.openModal}>
        Button Text
        {this.state.isShowingModal ?
          <ModalComponentHere/>
        : null}
      </a>
    )
  }
}

错误显示在以下行中：

state = {

为什么会出现此错误

---

我对JavaScript没有太多的经验，但在我看来这是正确的语法。

如果您将代码粘贴到中，您会注意到，在选中“实验”框之前，它不会传输

类主体中的这种语法（目前）不是有效的JavaScript语法，它是一种实验性的建议，将语法包含在该语言的未来版本中

巴贝尔支持

这一个是es7.classProperties，这是一个阶段0建议，因此为了使用它，您必须告诉巴贝尔您想要使用阶段0功能，或者特别是这一个（它默认为阶段2）

上面的链接介绍了实现这一点的一种方法，但另一种常见的方法是配置您想要使用的实验功能的阶段，例如

{
  "stage": 0
}

---

查看React的文档，了解如何通过扩展

React.Component

，但不使用实验语法来创建React组件的示例

这应该等同于您的代码的目的：

class Button extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isShowingModal: false
    }
    this.openModal = () => {
      this.setState({isShowingModal: true})
    }
  }
  render() {
    return (
      <a onClick={this.openModal}>
        Button Text
        {this.state.isShowingModal ?
          <ModalComponentHere/>
        : null}
      </a>
    )
  }
}

class按钮扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
isShowingModal:错误
}
this.openModal=（）=>{
this.setState（{isShowingModal:true}）
}
}
render（）{
返回(
按钮文本
{this.state.isShowingModal？
：null}
)
}
}

在代码中，您必须告诉react您将在模型中显示什么

openModal = () => {
    this.setState({isShowingModal: true});
  }

在这种方法中，您必须指定要在模式中显示的内容，然后相应地更新状态。我将向您展示一个示例，以便您可以将其应用于您的应用程序。 让我们从状态开始：

 state = {
    modalProduct:"",
    isShowingModal: false
  }

现在，我们需要传递以说明要显示的内容：

 openModal = () => {
      // this is the proper implementation of this.setState
       this.setState(() => { 
      return { modalProduct: modalComponent, isShowingModal: true };
    });
      }

因为我知道你的应用程序的结构，你是如何在你的应用程序中传递信息的，所以我只展示了基本步骤。现在您必须创建modalComponent。以下是启动modalComponent的方式：

if (!modalOpen) {
        return null;
      } else {
        return ()
      }

在返回后的括号中，您应该创建模型的设计。 此外，您还应该将“state.isShowingModal”的值传递给modalComponent

您还需要使用非常简单的“closeModal”方法：

closeModal = () => {
    this.setState(() => {
      return { modalOpen: false };
    });
  };

---

希望有帮助。

谢谢！难道没有更简单的方法来更改代码吗？我不想使用其他文件。添加了一个新的部分来向您展示您可以做什么

if (!modalOpen) {
        return null;
      } else {
        return ()
      }

closeModal = () => {
    this.setState(() => {
      return { modalOpen: false };
    });
  };