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

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

在评论中-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,
    };

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

Answer 1

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

Answer 2

如果可能的话，我尽量在使用 redux 时将本地状态保持在组件之外，所以为了回答你关于使其无状态的问题，我将采取以下步骤：

从modal.js本身
从 modal.js 中删除实际模态框，只需将模态框内容放入其中即可。
更改打开模态按钮以挂接到动作创建者，该动作创建者设置一个道具以打开模态并传递其内容（也设置一个以关闭它）

看起来像这样

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

请记住，这些命名约定仅供参考：使用最适合您的命名约定。

所以这里发生的事情是，当你点击那个按钮时，你会触发 this.props.openModal（一个动作），它在 reducers 中做这样的事情 -

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

关闭按钮会触发 onHide，它链接到 this.props.closeModal 操作，它只是执行：

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

所以这允许您做的是只有 1 个模态实例，然后通过单击该按钮将当前评论传递给它并打开它。该节目只是检查真实值，因此您将其设置回未定义，它会自行隐藏。

然后我将 content 的属性传递给模态框，这样你就可以在模态框内部使用它了。同样，将名称更改为最适合您的名称。

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

How to create this react modal the right way?

javascript

meteor

reactjs

react-bootstrap