代码之家 › 专栏 › 技术社区 › The Old County

Reactjs和antd模型-代码问题

antd modal-dialog reactjs

The Old County · 技术社区 · 7 年前

我是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>
    )
  }
}

3 回复 | 直到 7 年前

loelsonk 7 年前

您的示例演示了如何使用 state 外部 contructor class properties ES6 规格

// 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.
  // ...
}

使用 类属性 你需要安装一个babel插件 babel-plugin-transform-class-properties .有关示例和安装指南,请转到 here .

webpack2 这是我的巴别塔设置。可能对您有用:

...
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',
            ],
          },
        },
      ],
    },
  ],
},
...

Henrique Oecksler Bertoldi 7 年前

https://facebook.github.io/react/docs/state-and-lifecycle.html )

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

user8202629 user8202629 7 年前

反应 `initial state`

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模型-代码问题

反应 initial state

反应 `initial state`