Question

所以这是我在StackOverflow上的第一个问题，但是我有一个问题已经在我脑海中浮现了一段时间。

之前，当我在Meteor中使用Blaze时，很容易处理订阅更改。现在，当我切换到React时，它变得有点乏味但仍然可以管理。

到目前为止，我遇到的唯一问题是如何处理子组件中发生的订阅更改。下面的代码是我提出的，但它不能很好地工作，因为它会导致完全擦除本地集合，并且在UI中感觉不顺畅。我通过在props中传递的函数处理子进程的更改，该函数设置ReactiveVar然后传递给订阅。

有更好的方法吗？最佳做法？

const DataComponent = props =>
  (
    <div>
      <button
        onClick={() => {
          const { currentChildVal, handleChildClick } = props;
          const newVal = currentChildVal === 'someDefaultValue' ? 'newValue' : 'someDefaultValue';
          // Pass a new value to the parent
          handleChildClick(newVal);
        }}
      />
      {
        // Render the data
      }
    </div>
  );

// The ReactiveVar that the child will be provided
const fromChild = new ReactiveVar('someDefaultValue');

const DataContainer = withTracker(({ fromProp }) => {

  const currentChildVal = fromChild.get(); // Getting current value
  // and passing it to the sub
  const handle = Meteor.subscribe('sub', fromProp, fromChild.get());
  const data = Collection.find().fetch();

  // function passed to the child
  const handleChildClick = (newVal) => {
    fromChild.set(newVal);
  };

  return {
    loading: !handle.ready(),
    data,
    currentChildVal,
    handleChildClick,
  };
})(DataComponent);

处理流星中的订阅变化

0 个答案: