使用React子组件进行封装 [英] Encapsulation with React child components

问题描述

如何在React中访问子组件的状态（只是状态，而不是React状态）？

How should one access state (just state, not the React State) of child components in React?

我已经建立了一个小的React UI。在其中，我有一个组件显示所选选项的列表和一个按钮，允许它们被编辑。单击按钮打开一个模块，其中有一个复选框，每个选项一个。 Modal是它自己的React组件。显示所选选项的顶级组件和编辑它们的按钮拥有状态，Modal使用props进行渲染。一旦Modal被关闭，我想得到复选框的状态更新父对象的状态。我这样做通过使用refs在子对象'getSelectedOptions'，它返回一些JSON为我标识那些选项选择一个函数。因此，当选择Modal时，它调用从父进程传入的回调函数，然后向Modal请求选择的新选项集。

I've built a small React UI. In it, at one point, I have a Component displaying a list of selected options and a button to allow them to be edited. Clicking the button opens a Modal with a bunch of checkboxes in, one for each option. The Modal is it's own React component. The top level component showing the selected options and the button to edit them owns the state, the Modal renders with props instead. Once the Modal is dismissed I want to get the state of the checkboxes to update the state of the parent object. I am doing this by using refs to call a function on the child object 'getSelectedOptions' which returns some JSON for me identifying those options selected. So when the Modal is selected it calls a callback function passed in from the parent which then asks the Modal for the new set of options selected.

这里是我的简化版本代码

Here's a simplified version of my code

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以这种方式可能是不正确的，我应该传递状态以某种其他方式，或确实有父组件访问复选框本身。我还是比较新的React，所以想知道在这种情况下是否有更好的方法？

This keeps the implementation details of the UI of the Modal hidden from the parent, which seems to me to be a good coding practice. I have however been advised that using refs in this manner may be incorrect and I should be passing state around somehow else, or indeed having the parent component access the checkboxes itself. I'm still relatively new to React so was wondering if there is a better approach in this situation?

推荐答案

不想使用这样的refs真的。相反，一种方法是将回调传递给Modal：

Yeah, you don't want to use refs like this really. Instead, one way would be to pass a callback to the 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 ();
  }
});

也就是说，子程序调用通过props传入的函数。此外，你获得选择的选项的方式看起来过于--。相反，你可以有一个函数，当复选框被选中时运行，并将选择存储在模态状态。

I.e., the child calls a function that is passed in via props. Also the way you're getting the selected options looks over-fussy. Instead you could have a function that runs when the checkboxes are ticked and store the selections in the Modal state.

此问题的另一个解决方案可能是使用Flux模式，其中您的子组件触发带数据的操作，并将其转发到您的顶级组件将侦听的存储。这是有点超出这个问题的范围。

Another solution to this problem could be to use the Flux pattern, where your child component fires off an action with data and relays it to a store, which your top-level component would listen to. It's a bit out of scope of this question though.

这篇关于使用React子组件进行封装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！