日記(react modal)

GIRL發表於2017-12-27
React

場景

頁面上控制的modal顯示與隱藏，我糾結過兩種方式，也問過旁邊的小哥，給了我一串聽得莫名其妙的回答......

  • 前提: 有一個詳情的modal
    import React, { Component } from 'react';
    import {Modal} from 'antd';
    export default Detail extends Component{
        render(){
            return 
            <Modal 
                title="測試modal" 
                visible={this.props.visible} // 第二種方法才有此行程式碼
            />
        }
    }
複製程式碼
  • 第一種
    import React, { Component } from 'react';
    import {Button} from 'antd';
    import Detail from './components/detail';
    export default Index extends Component{
        state = {
            modalVisible: false
        }
        handleModal = () => {
            this.setSate{modalVisible: true}
        }
        render(){
            return (<div>
                <Button onClick={this.handleModal} />
                {this.state.modalVisible && <Detail />} // 第一種
            </div>)
        }
    }
複製程式碼
  • 第二種
    import React, { Component } from 'react';  
    import {Button} from 'antd';  
    import Detail from './components/detail';  
    export default Index extends Component{
        state = {  
            modalVisible: false
        }  
        handleModal = () => {
            this.setSate{modalVisible: true}
        }
        render(){
            return (<div>
                <Button onClick={this.handleModal} />
                <Detail visible={this.state.modalVisible} />
            </div>)
        }
    }
複製程式碼

瞎聊

把控制顯示隱藏的state放到父元件還是放到reducer中需要具體業務分析。 我開始糾結的是子元件裡面到底用那種方法來控制顯得比較合理一點，或者兩者的區別在哪裡。當時問了旁邊的小哥，給我的回覆是什麼根據modal個數之類很神的回覆.....
我認為, 第一種是將整個子元件Detail重新載入。第二種方法只是將Detail中的一個state改變了而已。所以，具體用哪種方法，如果我需要用到宣告周期函式，我會根據__生命週期__來具體分析使用哪種方法。但是問題來了，如果不涉及宣告周期函式，那麼是第一種還是第二種，我想這個得根據html css的渲染原理來看，一般情況下modal也不會設計太大的檔案樣式太複雜的互動，且我現在寫的大部分modal都有初始的stat預設值，所以我可能會選擇第一種。不過，還是得看應用場景......（手動@大佬謝謝啦）

相關文章