ReactJS：分离组件的最佳实践

Question

所以，我有一个 react-bootstrap 导航，我想让其中一个导航项打开和关闭一个 bootstrap 模态组件。

我正在处理这个：

import React, { Component, render } from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';

export default class NavigationBar extends Component {
 constructor() {
  super();
 this.state = {
  showModal: false
 } 
}
close() { this.setState({ showModal: false }); }
open() { this.setState({ showModal: true }); }
render() {
return (
  <div>
    <Navbar>
      ...entire navbar...
    </Navbar>
    <Modal show={this.state.showModal} onHide={() => this.close()}>

      ...entire modal... which would be nice to put if a different file

    </Modal>
  </div>
); } }

理想情况下，我想将模式放在不同的组件文件中并将其导入，但是当我这样做时，我不知道如何打开和关闭导航栏。

在跨文件维护组件状态的同时组合组件的最佳做法是什么？

谢谢！

Answer 1

一个很好的思考方式是容器与展示组件。容器保存您的状态和大部分逻辑。展示组件接受输入（props）并呈现 html (jsx) [并且几乎不做其他事情]。

因此，您可以制作自己的 Modal 组件，该组件接受关闭时调用的方法以及是否显示时调用的方法。它甚至可以是无状态组件——如果它只是 props + jsx，则不需要完整的 class 结构：

import React, { PropTypes } from 'react';

const MyModal = ({ show, onHide}) => (
  <Modal show={show} onHide={onHide}>

    // ...entire modal...

  </Modal>
);

// displayName and propTypes are always good to have
MyModal.displayName = 'MyModal';
MyModal.propTypes = {
  show: PropTypes.bool.isRequired,
  onHide: PropTypes.func.isRequired,
};
export default MyModal;

然后要使用它，您需要确保绑定您的方法，以便在正确的上下文中调用它们：

class NavigationBar extends Component {
  constructor() {
    super();
    this.state = {
      showModal: false
    };

    // this is the important binding
    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>
        <Navbar>
          // ...entire navbar...
        </Navbar>
        <MyModal
          show={this.state.showModal} 
          onHide={this.close}
        >
          // child content if needed (unless it's all defined in MyModal)
        </Modal>
      </div>
    ); 
  } 
}

Answer 2

您可以像这样将带有您的内容的 react-bootstrap 模态包装到您自己的自定义组件中：

import React from 'react';
import { Modal } from 'react-bootstrap';

const NewModal = ({show, onHide}) => {
  <Modal show={show} onHide={onHide}>
    Modal content in here
  </Modal>
};

export default NewModal;

然后从您的组件文件中导入该模式

import Modal from 'components/modal' // Import your new modal's default export

ReactJS：分离组件的最佳实践

ReactJS: Separating Components Best Practices

javascript

twitter-bootstrap

reactjs

react-bootstrap