ReactJS：分離組件最佳實踐

所以，我有一個react-bootstrap導航，我想讓其中一個導航項打開並關閉一個引導模式組件。ReactJS：分離組件最佳實踐

我有這個這個工作：

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

理想情況下，我想提出的模式在不同的組件文件並導入它，但是當我做，我失去了對如何翻譯導航欄打開和關閉。

什麼是組合組件的最佳實踐，同時保持文件間的狀態？

謝謝！

來源

2017-03-14 Daltron

想一想，它的一個好方法是容器vs表示組件。容器擁有你的狀態和你的大部分邏輯。演示組件接受輸入（道具）並呈現html（jsx）[並且不做其他事情]。

所以，你可以讓你自己的Modal組件接受方法來調用close和一個是否顯示它。它甚至可以是一個無狀態的組件 - 如果它只是道具+ 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> 
    ); 
    } 
}

來源

2017-03-14 00:29:18

我們在同一時間發佈，但您的答案更詳細。 +1！ –

您可以與您的內容包裝你的反應，引導模態到您自己的自定義組件，像這樣：

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;

，然後從組件文件導入模式

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

來源

2017-03-14 00:34:03

ReactJS：分離組件最佳實踐

回答

相關問題