不必要的模態呈現與React和React-bootstrap應用程序

我正在學習React並正在研究一個簡單的小應用程序。該應用程序包含一個包含選項卡和下拉菜單的行。從該下拉菜單中，您可以打開添加/刪除/編輯標籤的模式。不必要的模態呈現與React和React-bootstrap應用程序

我注意到，所有的模態都會在應用程序啓動時調用它們的渲染方法，並且每次點擊任何選項卡時，即使是當前選定的選項卡。對於React我真的很陌生，所以我很困惑，如果這是應該發生或不。該應用程序似乎按預期工作，但。

下面是代碼的超級簡化版本，只有必要的部分：

app.js

class App extends React.Component { 
    // ... 
    // state is { modals: { addTab: false, editTab: false, removeTab: false } } 

    closeModal = (modalState) => { 
    const obj = this.state.modals; 
    obj[modalState] = false; 
    this.setState(obj); 
    } 

    render() { 
    <div className="App container-fluid"> 
     // ... 
     <AddTabModal showModal={this.state.modals.addTab} closeModal={this.closeModal} ... /> 
     // ... 
    </div> 
    } 
}

AddTabModal.js

class AddTabModal extends React.Component { 
    // ... 
    render() { 
    // This gets triggered every time I click any tab or the dropdown menu. 
    // Even if the modal is not visible. 
    console.log('Render add tab modal'); 
    return (
     <Modal show={this.props.showModal} ... > 
     // ... 
     <Modal.Footer> 
      <Button onClick={() => { this.props.closeModal('addTab'); }}>Close</Button> 
     </Modal.Footer> 
     </Modal> 
    ); 
    } 
}

我也讀在JSX中使用箭頭函數是一種不好的模式，但是如果我將按鈕更改爲：

<Button onClick={this.props.closeModal('addTab')}>Close</Button>

它應該仍然只運行，當我點擊按鈕，對不對？但應用程序從一開始就完全鎖定，我得到「最大更新深度超出」錯誤。我相信這與上述問題有關，因爲我在應用中沒有任何componentWillUpdate/componentDidUpdate方法。

來源

2017-10-13 fnx

您能否在您的代碼中包含'Modal'導入？ – stone

有兩件事情可以做，以優化：

確保傳遞給模式的所有道具都是不可變
提取關閉功能成一個類的方法
使用PureComponent防止渲染除非道具改變

class AddTabModal extends PureComponent { 
    // ... 
    onCloseModal =() => { 
    this.props.closeModal('addTab'); 
    } 

    render() { 
    // This gets triggered every time I click any tab or the dropdown menu. 
    // Even if the modal is not visible. 
    console.log('Render add tab modal'); 
    return (
     <Modal show={this.props.showModal} ... > 
     // ... 
     <Modal.Footer> 
      <Button onClick={this.onCloseModal}>Close</Button> 
     </Modal.Footer> 
     </Modal> 
    ); 
    } 
}

我也看了，使用內部JSX箭頭功能是一個壞的模式，但如果我改變按鈕：

<Button onClick={this.props.closeModal('addTab')}>Close</Button>

這是因爲() => this.props.closeModal('addTab')創建了一個新的功能，即所謂的時將關閉模式。但是，如果您只有this.props.closeModal('addTab')，則立即調用關閉模式函數。

避免額外匿名函數的方法是將它提取到上面代碼中的類方法。

來源

2017-10-13 07:50:35

不必要的模態呈現與React和React-bootstrap應用程序

回答

相關問題