javascript - 如何以正确的方式创建这个 react 模式？

Question

我一直在开发我的第一个 Meteor 应用程序，但遇到了一些困难。我想按照最新的指南(ES6 和 React 15)创建代码，但我对 Javascript 中最近的所有更改感到困惑。

我想在当前的评论列表中添加 Bootstrap 模态，但似乎无法弄清楚如何使用正确的最新语法将我的内容添加到模态。

这是我当前的代码:

在comment.js中:

import React from 'react';
import { Row, Col, ListGroupItem, FormControl, Button } from 'react-bootstrap';
import { Bert } from 'meteor/themeteorchef:bert';
import { CommentsModal } from './comments-modal'


export const Comment = ({ comment }) => (

  <ListGroupItem key={ comment._id }>
    <Row>
      <Col xs={ 8 } sm={ 10 }>
        <FormControl
          type="text"
          defaultValue={ comment.title }
        />
      </Col>
      <Col xs={ 4 } sm={ 2 }>
        <Button
          bsStyle="danger"
          className="btn-block">
          Remove Comment
        </Button>
      </Col>
    </Row>
    <CommentsModal/>
  </ListGroupItem>
);

在 Comments-modal.js 中:

import React, { Component } from 'react';
import { Modal, Button, Tooltip } from 'react-bootstrap';

export class CommentsModal extends Component {
   constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };

    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
  }

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

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

  render() {
    return (
      <div>
        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={this.open}
        >
        </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>

          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

最后的 comments-list.js:

import React from 'react';
import { ListGroup, Alert } from 'react-bootstrap';
import { Comment } from './comment';

    export const CommentsList = ({ comments }) => (
      comments.length > 0 ? <ListGroup className="comments-list">
        {comments.map((com) => (
          <Comment key={ com._id } comment={ com } />
        ))}
      </ListGroup> :
      <Alert bsStyle="warning">No comments yet. Please add some!</Alert>
    );

    CommentsList.propTypes = {
      comments: React.PropTypes.array,
    };

我设法让模态框显示并工作，但是当我想在其中显示数据时，我无法让它工作。将这两者结合在一起的最佳方法是什么？

Answer 1

将 props 中的数据传递给 CommentsModal 并像平常一样渲染它。