Blueprintjsトーストコンポーネントのイディオムリアクション

Question

Blueprint UIライブラリには、ユーザーの操作に関する通知を表示するToasterコンポーネントがあります。ドキュメントから、最初

MyToaster.show({message: 'some message'})続い

const MyToaster = Toaster.create({options})を呼び出すことで使われています。

showメソッドをReactのライフサイクルに適合させることができません - 異なるボタンのクリックで異なるメッセージを表示する再利用可能なトースターコンポーネントを作成するにはどうすればよいですか？役立つなら、私はMobXをデータストアとして使用しています。

Answer 1

Toasterはあなたのリアクションライフサイクルを気にしないので、面白いものです。それはイベントに応じてすぐにトーストを焼くために命令的に使用されることを意図しています。

関連するイベントハンドラ（DOMクリックかReduxアクションのいずれか）でtoaster.show()と呼んでください。

我々は例自体でそれを行う方法を参照してください：Reduxの（とredux-actions）とtoastExample.tsx

Answer 2

私のソリューション...

処置：

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() { ... } 
}