javascript - 组件如何在不将状态向上移动到组件树的情况下向其兄弟发送消息？

Question

我有一个“页面”组件，其中包含一个表单和一个列表。表单和列表完全独立且不相交，除了当您保存表单时，列表应该刷新这一事实。

我的页面组件整体如下所示:

export default class PaymentsPage extends React.PureComponent {

    static propTypes = {
        bookingId: XPropTypes.stringOrNumber.isRequired,
        test: PropTypes.bool,
        stripePublishableKey: PropTypes.string,
        stripeUserId: PropTypes.string,
    };

    render() {
        return (
            <div>
                <ContentSection title="Enter Payment" storageKey="record-payment">
                    <RecordPaymentForm bookingId={this.props.bookingId} test={this.props.test} />
                </ContentSection>
                <ContentSection title="Previous Payments" storageKey="previous-payments">
                    <PreviousPaymentsTable bookingId={this.props.bookingId} test={this.props.test} stripePublishableKey={this.props.stripePublishableKey} stripeUserId={this.props.stripeUserId} />
                </ContentSection>
            </div>
        )
    }
}

我的问题是，RecordPaymentForm 如何向 PreviousPaymentsTable 发送消息以告诉它刷新？

我不想将 RecordPaymentForm 的状态移动到 PaymentsPage 中，因为我希望它保持独立。

我没有使用 flux/redux，现在也不打算使用它。

Answer 1

使用 mufa (面向事件的编程)， sibling 之间的交流将如下:

组件发送者(发布者):

import {fire} from 'mufa';

class RecordPaymentForm extends React.Component {

     // Assuming that the trigger to send the message is the following
     handleClick() {
       const message = 'this is a message from RecordPaymentForm';
       fire('sendSomething', message); 
     }
}

组件接收者(订阅者):

import {on} from 'mufa';

class PreviousPaymentsTable extends React.Component {

    componentDidMount() {
      on('sendSomething', (message) => {
         this.setState({recordPaymenetMessage: message});
      })
    }
}

//if your are using npm => import {on, fire} from 'mufa';
const {on, fire} = window.mufa; 

class RecordPaymentForm extends React.Component {


     onClick(event) {
       fire('addPayment', this.refs.item.value, this.refs.price.value); 
     }
     
     render() {
       return (
          <div>
            <input ref="item" placeholder="item name" /> 
            <input ref="price" placeholder="price" type="number" />
            <button onClick={this.onClick.bind(this)}>Add</button>
          </div>
          )
     }
}



class PreviousPaymentsTable extends React.Component {
  
    state={records:[]}
    componentDidMount() {
      on('addPayment', (item, price) => {
         this.setState({records: [...this.state.records, {item, price}]});
      })
    }

   
   render() {
    
      return (
        <ul>
          {
            this.state.records.map((r, index) => 
              <li key={index}> <b> {r.item} : </b> {r.price} $ </li>)
          }
        </ul>
      ) 
    }
}


class App extends React.Component {


  render() {
  
    return (
      <div>
         <RecordPaymentForm />
         <PreviousPaymentsTable />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('section'))

<script src="https://cdn.rawgit.com/abdennour/mufa/ddf78fd9/cdn/mufa-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section />

React 事件驱动的一般规则:

1. publish (fire) :在事件处理程序中调用。

2. subscribe (on) : 在componentDidMount中调用。

3. unsubscribe (off) : 在componentWillUnmount

中调用