带有React子组件的封装

Question

一个子组件的访问状态(仅仅是状态，而不是反应状态)应该如何反应？

我已经构建了一个小的。在其中，我曾经有一个组件显示了所选选项的列表和一个按钮，以允许编辑这些选项。单击该按钮将打开一个Modal，其中包含一组复选框，每个选项都有一个。模态是它自己的反应成分。显示所选选项的顶层组件和编辑它们的按钮拥有状态，而Modal则使用道具呈现。一旦Modal被取消，我希望获得复选框的状态来更新父对象的状态。为此，我使用the调用子对象'getSelectedOptions‘上的一个函数，该函数为我返回一些JSON，以标识所选的选项。因此，当选择Modal时，它会调用从父函数传入的回调函数，然后向Modal请求所选的新选项集。

下面是我的代码的简化版本

OptionsChooser = React.createClass({
  //function passed to Modal, called when user "OK's" their new selection
  optionsSelected: function() {
    var optsSelected = this.refs.modal.getOptionsSelected();
    //setState locally and save to server...
  },

  render: function() {
    return (
      <UneditableOptions />
      <button onClick={this.showModal}>Select options</button>
      <div>
        <Modal 
          ref="modal" 
          options={this.state.options} 
          optionsSelected={this.optionsSelected} 
        />
      </div>
      );
  }
});

Modal = React.createClass({
  getOptionsSelected: function() {
    return $(React.findDOMNode(this.refs.optionsselector))
      .find('input[type="checkbox"]:checked').map(function(i, input){
        return {
          normalisedName: input.value
        };
      }
     );
   },

  render: function() {
    return (
      //Modal with list of checkboxes, dismissing calls optionsSelected function passed in
    );
  }
});

这使Modal的UI的实现细节对父程序隐藏起来，这在我看来是一个很好的编码实践。然而，我被告知，以这种方式使用refs可能是不正确的，我应该以某种方式传递状态，或者让父组件访问复选框本身。我还是比较新的反应，所以想知道在这种情况下是否有更好的方法？

Answer 1

是啊，你真的不想用这样的裁判。相反，一种方法是向Modal传递一个回调：

OptionsChooser = React.createClass({
  onOptionSelect: function(data) {

  },

  render: function() {
    return <Modal onClose={this.onOptionSelect} />
  }
});

Modal = React.createClass({

  onClose: function() {
    var selectedOptions = this.state.selectedOptions;
    this.props.onClose(selectedOptions);
  },

  render: function() {
    return ();
  }
});

也就是说，孩子调用一个通过道具传入的函数。而且，你得到的选择的方式看起来过于挑剔。相反，您可以有一个函数，当复选框被勾选时运行，并将选择存储在Modal状态。

解决此问题的另一个解决方案可能是使用Flux模式，在这种模式中，您的子组件用数据触发一个操作，并将其中继到存储区，您的顶级组件会监听该存储。不过，这有点超出了这个问题的范围。