Javascript ReactJS：分离组件最佳实践

所以，我有一个react引导nav，我想让其中一个nav项打开和关闭引导模式组件

我有这样的工作：

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

import React，{Component，render}来自'React'；
从“react bootstrap”导入{Navbar、Nav、NaviItem、NavDropdown、MenuItem、Modal、Button}；
导出默认类NavigationBar扩展组件{
构造函数（）{
超级（）；
此.state={
showModal:错误
} 
}
close（）{this.setState（{showmodel:false}）；}
open（）{this.setState（{showmodel:true}）；}
render（）{
返回(
…整个导航栏。。。
this.close（）}>
…整个模式…如果使用不同的文件
); } }

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

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

---

谢谢

考虑它的一个好方法是容器与表示组件。容器保存您的状态和大部分逻辑。呈现组件接受输入（道具）和呈现html（jsx）[并且几乎不做其他事情]

因此，您可以创建自己的模态组件，该组件接受调用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;

import React，{PropTypes}来自'React'；
常量MyModal=（{show，onHide}）=>(
//…整个模态。。。
);
//displayName和PropType总是很好的选择
MyModal.displayName='MyModal'；
MyModal.propTypes={
show:PropTypes.bool.isRequired，
onHide:PropTypes.func.isRequired，
};
导出默认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>
    ); 
  } 
}

类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
showModal:错误
};
//这是重要的约束
this.close=this.close.bind（this）；
this.open=this.open.bind（this）；
}
close（）{this.setState（{showmodel:false}）；}
open（）{this.setState（{showmodel:true}）；}
render（）{
返回(
//…整个导航栏。。。
//子内容（如果需要）（除非在MyModal中定义）
); 
} 
}

您可以将包含内容的react引导模式包装到自己的自定义组件中，如下所示：

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;

---

我们在同一时间发布了，但是你的答案要详细得多+1.

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