Question

我一直在研究我的第一个Meteor应用程序并且有点卡住了。我想按照最新的指南（ES6和React 15）创建我的代码，但我对Javascript中最近的所有更改感到困惑。

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

这是我目前的代码：

在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>
    );
  }
}

最后评论-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,
    };

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

Answer 1

将props中的数据传递给CommentsModal并像往常一样进行渲染。

Answer 2

I try to keep local state out of component when using redux if possible, so to answer your question on making it stateless, I would take the following steps:

Remove the button that opens the modal from the modal.js itself
Remove the actual modal from the modal.js, just put the modal content inside of there.
Change the open modal button to hook into an action creator that sets a prop to open the modal and passes it's content (also set one to close it)

So that looks something like this

 <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>

<!-- Here is where it changes, -->
 <Button
      bsStyle="primary"
      bsSize="large"
      onClick={this.props.openModal(comment)}
    >
    </Button>

    <Modal show={this.props.commentModal} onHide={this.props.closeModal}>
       <CommentsModal content={this.props.commentModal} />
    </Modal>

Keep in mind, these naming conventions are just for examples sake : use whatever works best for you.

So what happens here is when you click that button you fire this.props.openModal (an action) which does something like this in the reducers -

 case actions.OPEN_COMMENT_MODAL:
       return state.set('commentModal', action.content);

the close buttons fire the onHide which is linked to the this.props.closeModal action which just does:

case actions.OPEN_COMMENT_MODAL:
       return state.set('commentModal', undefined);

So what this allows you to do is have just 1 modal instance and you pass the current comment to it with that button click and open it. The show just checks the truthy value, so you set it back to undefined and it will hide itself.

Then I am passing the prop of content to the modal, so you can then use it inside the modal itself. Again, change the names to whatever works best for you.

如何以正确的方式创建这种反应模式？

2 个答案: