如何使用 Lit HTML 将 React 钩子 useState() 的回调函数传递给 Web 组件的属性

Question

我正在构建一个自定义 Web 组件以与 React 一起使用，我正在使用 React useState 钩子和我需要将它传递到我的自定义 Web 组件中。我知道 Web 组件属性只接受字符串，如果我要将我的函数字符串化，它将失去它的范围。所以这就是我的问题。我正在使用 Lit HTML 和 React.

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

Answer 1

尝试在您的组件上使用 onChange={}，然后创建一个函数来处理更改。


const MyReactComp = (props) => {
  const [state, setState] = useState("");

  const stateUpdateHandler = (event) => {
    if ( event.target.value.trim().length > 0 ) {
      setState( event.target.value );
    }
  }

  return (
    <div className="Wrapper">
       <CustomWebComponent onChange={stateUpdateHandler} />
    </div>
  )
}

不能直接在 onChange={} 上使用 setState 的原因之一是范围不同，因此 this 在函数中使用时可能并不总是在预期范围。

然后在您的 CustomWebComponet 中，您将通过以下方式传回该值：

const CustomWebComponent = (props) => {

  // You can tie this is an event, or some other
  // normal function where you are processing the return value
  const onTrigger = (event) => {
    event.preventDefault();
    props.onChange(event.target.myvar.value);
  }

  return ( ... )
}

如果您注意到，属性名称 onChange={} 是任意的，您可以随意命名。只需确保在调用该函数时使用相同的名称，例如函数 onTrigger.

中的 props.onChange()

如何使用 Lit HTML 将 React 钩子 useState() 的回调函数传递给 Web 组件的属性

how do you pass a React hook useState() 's callback function to a web component's attribute using Lit HTML

javascript

web-component

reactjs