Question

所以，我有一个react-bootstrap导航器，我希望打开一个导航项并关闭一个bootstrap模态组件。

我有这个工作：

8048c80:    83 ec 2c                sub    $0x2c,%esp
8048c83:    c7 44 24 1c 00 00 00    movl   $0x0,0x1c(%esp)
8048c8a:    00 
8048c8b:    8d 44 24 1c             lea    0x1c(%esp),%eax
8048c8f:    89 44 24 08             mov    %eax,0x8(%esp)
8048c93:    c7 44 24 04 64 a7 04    movl   $0x804a764,0x4(%esp)
8048c9a:    08 
8048c9b:    8b 44 24 30             mov    0x30(%esp),%eax
8048c9f:    89 04 24                mov    %eax,(%esp)
8048ca2:    e8 59 fc ff ff          call   8048900 <__isoc99_sscanf@plt>
8048ca7:    83 f8 01                cmp    $0x1,%eax
8048caa:    74 05                   je     8048cb1 <phase_1+0x31>
8048cac:    e8 e4 07 00 00          call   8049495 <explode_bomb>
8048cb1:    81 7c 24 1c ba 01 00    cmpl   $0x1ba,0x1c(%esp)
8048cb8:    00 
8048cb9:    74 05                   je     8048cc0 <phase_1+0x40>
8048cbb:    e8 d5 07 00 00          call   8049495 <explode_bomb>
8048cc0:    83 c4 2c                add    $0x2c,%esp
8048cc3:    c3                      ret

理想情况下，我想将模态放在一个不同的组件文件中并将其导入，但是当我这样做时，我迷失了如何翻译导航栏的打开和关闭。

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

谢谢！

Answer 1

考虑它的一个好方法是容器与表示组件。容器保持您的状态和大部分逻辑。演示组件接受输入（道具）和渲染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;

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

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 Modal与您的内容一起打包到您自己的自定义组件中，如下所示：

Ctrl+D

然后从组件文件中导入该模态

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;

ReactJS：分离组件最佳实践

2 个答案: