javascript - ReactJS:分离组件的最佳实践

Question

所以，我有一个 react-bootstrap nav，我想让其中一个导航项打开和关闭一个 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，则不需要完整的类结构:

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;

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

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