Question

新的反应不太确定这里最好的方法是什么。

我想要做的是在另一个组件上运行事件时呈现组件（错误消息组件）。

这里的问题是我应该能够呈现多个通知，每个通知都有不同的状态。（错误，警告，成功）。

其他信息，

我的主要应用类，

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>
    )
  }
});

谢谢！

Answer 1

您可以使用类似于通量的实现（例如redux）将通知信息存储在单个对象中。然后，任何组件都可以使用您需要的元数据（message，message_type）发送通知。然后，您的通知组件将使用通知并包含您在通知中需要的所有业务逻辑：一次显示多少，如何显示它们，何时解除通知等等。

编辑：看起来这是一个你可以使用的软件包，或者至少源代码是我所描述的逻辑的一个例子。 https://github.com/indexiatech/re-notif

Answer 2

另一个变种，如何组织消息组件并从外部运行其方法。

看一看Confirm.openModal方法，任何React组件都可以调用它，而与Confirm组件和call组件之间的关系无关。同样，它也可以在全局窗口中使用而无需声明。

https://codesandbox.io/s/r7jop83wk4

React，在组件事件上呈现消息的最佳方法

2 个答案: