Question

我正在尝试根据说明from here在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>
    )
  }
}

但是，当我尝试构建项目时，我收到以下错误：

 Parse Error: Line 6: Unexpected token = while parsing file

错误显示在该行：

state = {

为什么会出现此错误？

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

Answer 1

如果您将代码粘贴到Babel online REPL中，您会注意到在您检查＆＃34;实验＆＃34;框。

state = {
  isShowingModal: false
}

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

Babel支持transpiling experimental features to run in today's JavaScript。

这是es7.classProperties，这是一个阶段0提案，所以为了使用它你必须告诉Babel您要么使用阶段0功能或特别是这个（默认为阶段2）。

上述链接涵盖了一种方法，但另一种常见的方法是create a .babelrc file，它配置您想要使用的实验性功能的阶段，例如。

{
  "stage": 0
}

查看React的ES6 Classes文档，了解如何通过扩展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>
    )
  }
}

Answer 2

在代码中，您必须告诉反应要在模型中显示的内容。

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 };
    });
  };

希望对您有帮助。

React中的Bootstrap模态

2 个答案: