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

因此，我有一个react-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>
); } }

理想情况下，我想将模态放在另一个组件文件中并导入，但是当我这样做时，我对如何转换导航栏的打开和关闭一无所知。

组合组件同时保持文件间状态的最佳实践是什么？

谢谢！

最佳答案

考虑它的一个好方法是容器与表示组件。容器保存您的状态和大多数逻辑。演示组件接受输入（属性）并呈现html（jsx）[并且仅做其他事情]。

因此，您可以制作自己的Modal组件，该组件采用调用close的方法以及一个是否显示它的方法。它甚至可能是一个无状态的组件-如果只是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;

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

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

关于javascript - ReactJS:分离组件最佳实践，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42775707/