React，在組件事件上呈現消息的最佳方法

新的反應不太確定這裏最好的方法是什麼。React，在組件事件上呈現消息的最佳方法

當我在另一個組件上運行事件時，我想要做的是呈現組件（錯誤消息組件）。

這裏的問題是我應該能夠呈現多個通知，以及他們每個人都有不同的狀態。（錯誤，警告，成功）。

更多信息，

我的主應用程序類，

MainLayout = React.createClass({ 
    render() { 
    return (
     <div> 

     {this.props.header} 

     {this.props.notification} 

     {this.props.content} 

     {this.props.footer} 

     </div> 
    ) 
    } 
});

，這是我的通知類，它獲取的{this.props.notification}

SwiftNotification = React.createClass({ 
    getInitialState() { 
    return { 
     type: 'not-error', 
    } 
    }, 
    render() { 
    return (
     <div className={ this.state.type + " jwlnotification container-fluid text-center"}> 
      text for this.... 
     </div> 
    ) 
    } 
});

所以呈現在inviteMembers功能我希望能夠呈現通知組件，但在此組件之外。

BandEvent = React.createClass({ 
    propTypes: { 
    id: React.PropTypes.string.isRequired, 
    name: React.PropTypes.string.isRequired, 
    location: React.PropTypes.string.isRequired 
    }, 

    inviteMembers(e) { 
    e.preventDefault(); 

    Meteor.call('inviteMembers', this.props.id, function(error, data) { 
     if (error) { 
     console.log(error.reason); 
     } else { 
     // what do we want to do here if we are successful.. 
     console.log(data); 

     } 
    }); 

    }, 

    render() { 

    let { id, name, location } = this.props; 

    return (
     <li className="bandEvent" ><button className="btn btn-info btn-sm" onClick={this.inviteMembers}> Invite Members </button> {name} at {location}</li> 
    ) 
    } 
});

謝謝！

來源

2016-01-30 Jake Lacey

您可以使用像flux這樣的類似flux的實現將通知信息存儲在單個對象中。然後任何組件都可以使用您需要的元數據發送通知（message,message_type）。然後，您的通知組件將使用通知，幷包含您需要的所有業務邏輯：一次顯示多少個，如何顯示它們，何時解除它們等。

編輯：看起來像這是一個你可以使用的包，或者至少源代碼是我描述的邏輯的一個例子。 https://github.com/indexiatech/re-notif

來源

2016-01-30 20:10:15

對不起，我認爲我錯誤地解釋了自己，我希望能夠顯示一條消息（自定義消息），讓用戶知道某些操作是否成功。我希望這是有道理的。 –

React，在組件事件上呈現消息的最佳方法

回答

相關問題