2017-04-19 1 views
0

のように表示されるまで、私のメッセージを示して反応する成分を持つ:コールリアクトコンポーネントは、アラート機能

import React, { PropTypes } from 'react'; 

const Message = props => { 
    const { type, msg } = props; 

    if (type === 'success') { 
    return (<div>{msg}</div>); 
    } else { 
    return null; 
    } 
}; 

Message.PropTypes = { 
    type: PropTypes.string.isRequired, 
    msg: PropTypes.string.isRequired, 
}; 

export default Message; 

//このコンポーネントは、インデックスからこのように呼ばれている:

ここでは、コードです。 js:

<Message type="success" msg="This is a Message" /> 

私の質問は...私は関数を呼び出すようにコンポーネントを呼び出すことができます。例えば

if (function is success then) { 
    //Show the Message Component 
} 

どのように私が反応してこれを行うことができますか?ないリアクトコンポーネントであれば

答えて

2

if句は、別のコンポーネントに反応内にある場合、あなたはそれをレンダリングしたい、

class AnotherReact extends Component { 
    render() { 
     let alert = success ? <Message /> else ''; 
     return (<div>{ alert }</div>); 
    } 
} 

は、そうでなければ、あなたはReactDOM.render()を使用しなければならないでしょう。

if (is success) { 
    ReactDOM.render(<Message />, document.querySelector()); 
} 
+0

onclickイベントはどうですか? – JakeBrown777

+0

@ JakeBrown777どういう意味ですか? –

関連する問題