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，在组件事件上呈现消息的最佳方法

回答

相关问题