Question

我最近不得不在最近几天拿起ReactJS来处理项目。虽然我掌握了大部分基础知识，但我遇到了ES5和ES6语法的问题。我无法完全掌握差异以及如何将代码从一个转换为另一个。我一直在使用大量的ES6复制和粘贴，所以我很容易接受。但是当我遇到ES5时，我很挣扎。

我试图从预先存在的代码创建一个模态，但我不太清楚它到底应该是什么样子。以下是我尝试转换的内容：

import React from 'react';
import ReactDOM from 'react-dom';

const Example = React.createClass({
   getInitialState() {
      return { showModal: false };
   },

    close() {
     this.setState({ showModal: false });
   },

    open() {
     this.setState({ showModal: true });
   },

    render() {
     const popover = (
      <Popover id="modal-popover" title="popover">
    very popover. such engagement
  </Popover>
);
const tooltip = (
  <Tooltip id="modal-tooltip">
    wow.
  </Tooltip>
);

return (
  <div>
    <p>Click to get the full Modal experience!</p>

    <Button
      bsStyle="primary"
      bsSize="large"
      onClick={this.open}
    >
      Launch demo modal
    </Button>

    <Modal show={this.state.showModal} onHide={this.close}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Text in a modal</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h4>Popover in a modal</h4>
        <p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>

        <h4>Tooltips in a modal</h4>
        <p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>

        <hr />

        <h4>Overflowing text to show scroll behavior</h4>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={this.close}>Close</Button>
      </Modal.Footer>
    </Modal>
  </div>
   );
 }
    });

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

任何提示/技巧/帮助都会非常感激！

Answer 1

如果您使用webpack之类的东西构建js包，则可以选择要使用的es6的哪些功能。它不是全部或全部。＆＃34;例如，在上面您使用的是ES6导入语法。

另外，一个重要的区别是es6特性和React.createClass（）之间的区别以及React扩展了组件结构。你可以在这里阅读https://facebook.github.io/react/docs/components-and-props.html

将ReactJS代码转换为ES6语法

1 个答案: