ReactJS：コンポーネントを分離するベストプラクティス

Question

私は反応ブートストラップnavを持っており、navアイテムの1つを開いてブートストラップモーダルコンポーネントを閉じたいと思っています。私はこの本で作業している

：理想的には

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

これは、コンテナとプレゼンテーションコンポーネントの違いです。コンテナはあなたの状態とあなたのロジックの大部分を保持します。プレゼンテーションコンポーネントは入力（小道具）を取り込み、html（jsx）をレンダリングします。

したがって、閉じるかどうかを呼び出すメソッドと、それが表示されているかどうかを判断する独自のModalコンポーネントを作成できます。それも、ステートレスなコンポーネントとすることができ - それはちょうど+ 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 from 'react'; 
import { Modal } from 'react-bootstrap'; 

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

export default NewModal; 

をしてからコンポーネントファイルからそのモーダルをインポート：

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

あなたはそうのような独自のカスタム・コンポーネントにあなたのコンテンツを使用して反応し、ブートストラップモーダルをラップすることができます

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