如何将数据从子 Web 组件传递到其直接父元素

Question

我基本上需要将一个值传递给我的 Web 组件，然后我将对其执行一些随机操作，现在我想将该新值传递回我的 React 组件。我怎么做？

function MyReactcomp() {
   const [state, setState] = useState("Justin is cool");
   return (
        <div className="Wrapper">
           <customweb-component state={state} />
        </div>
    );
}

现在在自定义网络组件中，我将状态更改为“不，你不！！”。如何将此值从我的 Web 组件传递回我的 Rea t 组件？我知道我可以向下传递函数，因为你只能向下传递字符串

Answer 1

您应该使用 React，而不是查询 DOM，Ref如下所示：

function MyReactcomp() {
  const [state, setState] = useState("Justin is cool");

  // Hold the web component reference here
  const myWebComp = useRef();

  useEffect(() => {
    myWebComp.current?.addEventListener('tab-select', (event) => {
      setState(Object.keys(adminTabs[event.detail.tabIndex]));
    });
  }, []);

  return (
    <div className="Wrapper">
      <customweb-component ref={myWebComp} state={state} />
    </div>
  );
}

而且，如果您需要观察引用元素的变化，那么您可以使用 plainuseState来保存对该元素的引用：

function MyReactcomp() {
  const [state, setState] = useState("Justin is cool");

  // Hold the web component reference here
  const [webComp, setWebComp] = useState(null);

  useEffect(() => {
    webComp?.addEventListener('tab-select', (event) => {
      setState(Object.keys(adminTabs[event.detail.tabIndex]));
    });
  }, [webComp]);

  return (
    <div className="Wrapper">
      <customweb-component ref={setWebComp} state={state} />
    </div>
  );
}

如果您发现这样做的次数太多，您可以将此行为抽象为自定义挂钩。例如：

function useWebCompProp(ref, initialValue) {
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    ref.current?.addEventListener('onState', (event) => {
      // Update the state here
      setState(event.detail);
    });
  }, []);

  const setter = (newState) => {
    setState(newState);
    ref.current?.state = newState;
  };

  return [state, setter];
}


function useWebCompEvent(eventName, callback) {

  // Hold the web component reference here
  const myWebComp = useRef();

  useEffect(() => {
    myWebComp.current?.addEventListener(eventName, callback);
  }, []);

  return myWebComp;
}


function MyReactcomp() {

  const myWebComp = useWebCompEvent(eventName, (event) => {
    setState(Object.keys(adminTabs[event.detail.tabIndex]));
  });

  const [state, setState] = useWebCompProp(myWebComp, "Justin is cool");

  return (
    <div className="Wrapper">
      <customweb-component ref={myWebComp} />
    </div>
  );
}