Blueprintjs Toast組件的地圖反應

Question

Blueprint UI庫提供了一個Toaster組件，該組件顯示用戶操作的通知。從文檔，它的使用首先通過

MyToaster.show({message: 'some message'})調用

const MyToaster = Toaster.create({options})，緊隨其後。

我在將show方法應用到React的生命週期中時遇到了麻煩 - 如何創建可在不同按鈕點擊時顯示不同消息的可重用的烤麪包機組件？如果有幫助，我使用MobX作爲數據存儲。

Answer 1

Toaster在這方面很有趣，因爲它不關心你的React生命週期。這意味着必須立即響應事件才能發起敬酒。

只需在相關事件處理程序中調用toaster.show()（無論是DOM點擊還是Redux操作）。

看看我們如何做到這一點的例子本身：toastExample.tsx

Answer 2

我與終極版（和redux-actions）解決方案...

操作：

export const setToaster = createAction('SET_TOASTER');

減速機：

const initialState = { 
    toaster: { 
    message: '' 
    } 
}; 

function reducer(state = initialState, action) { 
    switch(action.type) { 
    case 'SET_TOASTER': 
     return { 
     ...state, 
     toaster: { ...state.toaster, ...action.payload } 
     }; 
    }; 
} 

多士爐組件：

// not showing imports here... 

class MyToaster extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     // set default toaster props here like intent, position, etc. 
     // or pass them in as props from redux state 
     message: '', 
     show: false 
    }; 
    } 

    componentDidMount() { 
    this.toaster = Toaster.create(this.state); 
    } 

    componentWillReceiveProps(nextProps) { 
    // if we receive a new message prop 
    // and the toaster isn't visible then show it 
    if (nextProps.message && !this.state.show) { 
     this.setState({ show: true }); 
    } 
    } 

    componentDidUpdate() { 
    if (this.state.show) { 
     this.showToaster(); 
    } 
    } 

    resetToaster =() => { 
    this.setState({ show: false }); 

    // call redux action to set message to empty 
    this.props.setToaster({ message: '' }); 
    } 

    showToaster =() => { 
    const options = { ...this.state, ...this.props }; 

    if (this.toaster) { 
     this.resetToaster(); 
     this.toaster.show(options); 
    } 
    } 

    render() { 
    // this component never renders anything 
    return null; 
    } 
} 

應用組件：

或任何你的根級組件...

const App = (props) => 
    <div> 
    <MyToaster {...props.toaster} setToaster={props.actions.setToaster} /> 
    </div> 

一些其他部件：

，你需要調用烤麪包機......

class MyOtherComponent extends Component { 
    handleSomething =() => { 
    // We need to show a toaster! 
    this.props.actions.setToaster({ 
     message: 'Hello World!' 
    }); 
    } 

    render() { ... } 
}