Reactjs 和 antd modals - 代码问题

Question

我是 reactjs 的新手，我正在尝试使用 antd 的模态功能。但是，当我将基本示例代码合并到我的代码库中时，我遇到了一些错误——我不得不删除冒号、尾随逗号，并且状态变量出现错误。

import { Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

我的错误是语法错误？我试图在构造函数中设置状态，但它随后未定义。

client:119 ./src/components/Video/VideoConference.js
Module build failed: SyntaxError: D:/wamp/www/e-profound-react/src/components/Video/VideoConference.js: Unexpected token (631:8)

  629 |   }
  630 | 
> 631 |   state = { visible: false }
      |         ^
  632 |   showModal () {
  633 |     this.setState({
  634 |       visible: true,

 @ ./src/router.js 35:0-65
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

我的代码看起来更复杂，但看起来像这样。

class VideoConference extends React.Component {

  constructor (props) {
    super(props)
  }

  componentWillMount () {

  }

  componentWillUnmount () {
  }

  componentDidMount () {
  }

  state = { visible: false }
  showModal () {
    this.setState({
      visible: true,
    })
  }
  handleOk (e) {
    console.log(e)
    this.setState({
      visible: false,
    })
  }
  handleCancel (e) {
    console.log(e)
    this.setState({
      visible: false,
    })
  }

  render () {

    return (
      <div>
        <Spacers />

        <Button type='primary' onClick={this.showModal}>Open</Button>
        <Modal
          title='Basic Modal'
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

      </div>
    )
  }
}

Answer 1

您必须将初始状态放入 class 构造函数 (https://facebook.github.io/react/docs/state-and-lifecycle.html)

constructor(props){
  super(props);
  this.state = { visible: false }
}

Answer 2

您的示例显示了如何在 contructor 方法之外使用 state。这称为 class properties 并且不是 ES6 规范的一部分。

首先你应该知道 standard/default react ES6 class 语法：

// example code here
import React, { Component } from 'react';

class App extends Component {  // same as React.Component
  constructor(props) {
    super(props); // you always need to call super();

    this.state = {
      visible: false,
    }
  }

  // other methods, lifecycle methods, render method etc.
  // ...
}

要使用 class properties，您需要安装一个 babel 插件 babel-plugin-transform-class-properties。有关示例和安装指南，请转到 here.

如果您使用的是 webpack2，这是我的 babel 设置。可能对您有用：

...
module: {
  rules: [
    // .js(x) loading
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          query: {
            // Ignore the .babelrc at the root of our project-- that's only
            // used to compile our webpack settings, NOT for bundling
            babelrc: false,
            presets: [
              ['env', {
                // Enable tree-shaking by disabling commonJS transformation
                modules: false,
                // Exclude default regenerator-- we want to enable async/await
                // so we'll do that with a dedicated plugin
                exclude: ['transform-regenerator'],
              }],
              // Transpile JSX code
              'react',
            ],
            plugins: [
              'transform-object-rest-spread',
              'syntax-dynamic-import',
              'transform-regenerator',
              'transform-class-properties',
              'transform-decorators-legacy',
            ],
          },
        },
      ],
    },
  ],
},
...

Answer 3

反应 `initial state` & ES 6 class

import { Modal, Button } from 'antd';

class App extends React.Component {
  constructor(props){
      super(props);
      this.state  = {
          visible: false
      };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Reactjs 和 antd modals - 代码问题

Reactjs and antd modals - code issues

modal-dialog

reactjs

antd

反应 `initial state` & ES 6 class

Reactjs 和 antd modals - 代码问题

Reactjs and antd modals - code issues

modal-dialog

reactjs

antd

反应 initial state & ES 6 class

反应 `initial state` & ES 6 class