Question

我对React很陌生，我想确保我的流程正确无误：

在这个简单的例子中，我有一个MsgBox组件，可以维护自己的文本状态。当我点击MsgBox中的按钮时，其当前值应该发送到父级。

var MsgBox = React.createClass({
  getInitialState() {
    return {msg: ''}
  },

  handleKeyUp(event) {
    this.setState({msg: event.target.value});
  },

  sendUp() {
    var inp = React.findDOMNode(this.refs.txt);

    this.props.msgSetter(inp.value);
  },

  render() {
    return (
      <div className="msgbox">
        <input onKeyUp={this.handleKeyUp} ref="txt" />
        <button onClick={this.sendUp}>Send it up!</button>
        <div className="echo">{this.state.msg}</div>
      </div>
    )
  }
});

var Hello = React.createClass({
    getInitialState() {
      return {latestMessage: 'N/A'}
    },

    setLatestMessage(msg) {
      this.setState({latestMessage: msg});
    },

    render() {
      return (
        <div>
          <p>The latest message is {this.state.latestMessage}.</p>
          <div className="msgboxes">
            <MsgBox msgSetter={this.setLatestMessage} />
            <MsgBox msgSetter={this.setLatestMessage} />
            <MsgBox msgSetter={this.setLatestMessage} />
          </div>
        </div>
      )
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

小提琴：https://jsfiddle.net/70oo7zzy/1/

这几乎是如何完成的？如果您有这种结构会发生什么：

<Home />
  <StatusBoard />
    <Sector />
      <EventsList />
        <Event />

... Event必须向StatusBoard发送一些内容？我是否真的必须将回复道具从StatusBoard传递到Sector，然后传递到EventsList，最后传递给每个Event？这似乎有点矫枉过正。或许我正在以错误的方式思考它。

Answer 1

对于“vanilla”React应用程序，您实际上正在考虑它。 React文档基本上建议您尝试完全使用props创建组件，这样它们可以最大程度地组合，可重用和声明。

在实践中，对于任何复杂的页面或组件层次结构，我都没有发现这个策略非常实用，因为我确信你感觉很好。你最终会得到顶层的一些超级巨大组件，它们知道后代需要做的所有事情，并且必须管理应用程序中每个操作的所有回调。

React应用程序中复杂程度越来越高的自然下一步是转移到Flux architecture。在Flux世界中，您将拥有保存数据的商店，并且组件将触发商店正在监听的动作（通过ActionCreators，以使用Facebook的术语逐字）以更新该数据。然后其他组件会从这些商店中获取state或props，并且每个人都在同一页面上。

在你的世界里，我想象一个MessageStore，它可能会保留一系列信息。 MsgBox将触发CREATE_MESSAGE事件，MessageStore将侦听并添加到其内部数组。您的顶级Hello组件会监听MessageStore次更改，并致电MessageStore.getLatestMessage()以获取最后一条消息。

有许多库可帮助您在应用中实施Flux架构。我所知道的一些常见的：

我确信还有更多选择。

没有处理我想要的所有内容，所以我们在我们公司发布了here我们自己的小助手，但是如果你想要更多的社区支持，你可以尝试上面列出的一个例子。 / p>

React - 让孩子们向父母发送数据

1 个答案: