Question

我制作了一个React UI小部件，让用户选择许多不同的时间和日期。用户的当前选择以顶级组件SetData<T>(T data)的状态存储。然后，我有一个这样的小部件包装：

DateTimePicker

我想添加一个验证以确保至少选择了X天/次，但是此验证需要在小部件外部实施。

为此，我需要某种方式询问窗口小部件的状态。即用户选择了什么？尽管看上去类的状态似乎不是react组件的公共api的一部分。

我该如何获取状态，或者还有其他丢失的方式？

Answer 1

从父级到子级强制执行操作的解决方案通常包括将ref带到子级组件。遵循以下原则：

export default {
  new: (args) => {
    let myRef = React.createRef();
    const store = {
      reactElement: <DateTimePicker
          ref={myRef}
          startDate={args.startDate}
          endDate={args.endDate}
      />
    };

    return {
      getState: () => {
        return myRef.current.getState(); 
      },
      render: (selector) => {
        ReactDOM.render(store.reactElement, document.querySelector(selector));
      }
    };
  }
};

在添加ref={myRef}作为道具的情况下，每当安装DateTimePicker时，它将为myRef.current分配对已安装组件的引用。然后，您可以使用该引用直接与最近安装的组件进行交互。

公开React小部件的状态

1 个答案: