Question

我的目标是有一个微调器组件，我可以在任何我想要的地方弹出，同时正在执行一些活动。

例如，让我说我有这个：

As o2

这是我的render() { return ( <form onSubmit={this.handleSubmit} className={this.props.className} noValidate> {React.Children.map(this.props.children, this.renderChild)} </form> ) },方法，但它无法正常运行：

handleSubmit

屏幕变黑，我收到一些令人讨厌的警告。 handleSubmit(event) { event.preventDefault(); React.render(<SmartSpinner />, React.findDOMNode(this)); },将涵盖整个网页，因此它的定位并不重要（它的SmartSpinner），但我确实需要调用它编程。换句话说，我不想要这样做：

position: fixed

那么在当前页面/组件中进行微调器或模态或其他临时叠加的好方法是什么？

Answer 1

将微调器组件放在顶级组件中。然后使用PubSub或其他事件系统从任何地方触发微调器，f.ex：

var App = React.createClass({
  getInitialState: function() {
    return { spinning: false }
  },
  componentDidMount: function() {
    this.spinnerToken = PubSub.subscribe('spinner', function(e) {
      this.setState({ spinning: !!e.start })
    }.bind(this))
  },
  componentWillUnmount: function() {
    PubSub.unsubscribe(this.spinnerToken)
  },
  render: function() {
    return (
      <div>
        <MainComponent />
        <Spinner style={{ display: this.state.spinning ? 'block' : 'none' }}/>
      </div>
    )
  }
})

现在你可以从任何地方拨打PubSub.publish('spinner', { start: true })（我在这里使用了https://github.com/mroderick/PubSubJS）。

如何拥有一个我可以从任何地方调用的React微调器组件？

1 个答案: