Communication between two component in html and react

[konglx90]

customEvent + web component

• vaadin-radio-button
• vaading-login

[konglx90]

html:

<xq-button>
   我是按钮
</xq-button>
<script>
const button = document.querySelector('xq-button');
button.addEventListener('xq:click', function() {
  console.log('button click')
});
</script>

react:

import React, { useState, useRef, useEffect } from "react";
import useXqEvent from '@xqui/use-xq-event';
import '@xqui/button';

function ReactXqButtonDemo() {
  const [theme, setTheme] = useState('default');
  const button = useRef();

  useXqEvent(button, [{
    event: 'xq:click',
    handler: function() {
      console.log('click button')
      setTheme('primary')
    }
  }])

  return (
    // @ts-ignore
    <xq-button ref={button} theme={theme}>hhh</xq-button>
  )
}

export default ReactXqButtonDemo;

[konglx90]

see demo

1. https://github.com/kuaikeduos/xiaoqiang/blob/master/packages/button/example/index.js
2. https://github.com/kuaikeduos/xiaoqiang/tree/master/packages/use-xq-event