[英]How do i pass data up from a child web component to it's direct parent element
I need to basically pass a value down to my web component, I will then do some random thing to it, now I want to pass that new value back up to my React Comnponent.我基本上需要将一个值传递给我的 Web 组件,然后我会对它做一些随机的事情,现在我想将该新值传递回我的 React 组件。 How do I do that?
我怎么做?
function MyReactcomp() {
const [state, setState] = useState("Justin is cool");
return (
<div className="Wrapper">
<customweb-component state={state} />
</div>
);
}
Now inside the customweb-component, I will change state to "No your not!!".现在在 customweb-component 中,我将状态更改为“No your not!!”。 How can I pass this value back up from my web component to my Rea t Copmponent?
如何将此值从我的 Web 组件传递回我的 Rea t 组件? I know I can pass a function down because you can only pass strings down
我知道我可以向下传递一个函数,因为你只能向下传递字符串
Instead of querying for DOM, you should use React's Ref
as shown below:您应该使用 React 的
Ref
,而不是查询 DOM,如下所示:
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>
);
}
And, you if you need to observe for changes in your referenced element, then you can use plain useState
to hold reference to the element:而且,如果您需要观察被引用元素的变化,那么您可以使用普通的
useState
来保存对元素的引用:
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>
);
}
If you find doing this too many times, you can abstract this behavior into custom hooks.如果您发现这样做太多次,您可以将此行为抽象为自定义挂钩。 For example:
例如:
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>
);
}
In react, the transfer of data is 1-way only, ie, from Parent-to-Child However, if you need to have a handler in the parent element for some data change in the child element, you can use Lifting Up State
This could help achieving what you need.在 react 中,数据的传输只有 1-way,即从父到子。但是,如果您需要在父元素中有一个处理程序来处理子元素中的某些数据更改,您可以使用
Lifting Up State
This可以帮助实现你所需要的。
If not, please provide more details about the actual case scenario如果不是,请提供更多关于实际案例场景的细节
I figured out that you need to attach a custom event handler to an element in your Lit-html template.我发现您需要将自定义事件处理程序附加到 Lit-html 模板中的元素。 You can then use getElementById or something to that effect and listen for the event in the parent component.
然后,您可以使用 getElementById 或类似的东西来监听父组件中的事件。
This is a combination of my answer and Harshal Patil's he took into account that using Reacts built-in features for manipulating the DOM is preferable to manipulating it directly.这是我的回答和 Harshal Patil 的结合,他考虑到使用 Reacts 内置功能来操作 DOM 比直接操作它更可取。
import React, { useEffect, useRef } from 'react';
function MyReactcomp() {
const [state, setState] = useState("Justin is cool");
const webCompRef = useRef();
useEffect(() => {
webCompRef.addEventListener('tab-select', (event) => {
setState("No he is not!!")
})
}, []}
return (
<div className="Wrapper">
<customweb-component ref={webCompRef} state={state} />
</div>
);
}
This pattern will allow you to pass your data down through the web components attributes.此模式将允许您通过 Web 组件属性向下传递数据。 You can then listen for your native or custom events.
然后,您可以侦听您的本机或自定义事件。 This is cool because now components can cross frameworks and libraries, if one team is using React and the other is using Angular they can share components and keep there UI in sync.
这很酷,因为现在组件可以跨框架和库,如果一个团队使用 React 而另一个团队使用 Angular,他们可以共享组件并保持 UI 同步。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.