Reactjsとantd modals - コードの問題

Question

私はreactjsに新しく、私はantdのモーダル機能を使用しようとしています。しかし、基本的なサンプルコードを自分のコードベースに組み込むと、いくつかのエラーが残っています。コロンと末尾のカンマを削除しなければならず、状態変数にエラーが発生します。

https://ant.design/components/modal/

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

あなたの例では、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-plugin-transform-class-propertiesをインストールする必要がclass propertiesを使用するには：

まず、あなたが知っておくべき標準/デフォルトではES6クラスの構文を反応させます。例とインストールガイドについては、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', 
      ], 
      }, 
     }, 
     ], 
    }, 
    ], 
}, 
... 

Answer 2

あなたはクラスのコンストラクタ（https://facebook.github.io/react/docs/state-and-lifecycle.html）で初期状態を配置する必要があり

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

Answer 3

はinitial state & ES 6クラス

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>