将事件添加到组件中的svg字符串并呈现它

Question

基本上，我需要向svg中的特定元素添加事件侦听器，我在组件中以param的形式接收这些元素

​

export default function RoomPlan({ svg, startDate, endDate}) {
  const [selectedDesk, setSelectedDesk] = useState(null);
  const [previouslySelectedDesk, setPreviouslySelectedDesk] = useState(null);

  var doc = new DOMParser().parseFromString(svg, "text/xml");

  var elements = Array.from(doc.querySelectorAll('#desk rect'));

  if (elements) {
    elements.forEach(function (el) {
      el.addEventListener("click", function(){alert('hi')});
    })
  }

  return (
    <div>
      <h2 className={css.labels}>Select desk</h2>
      <div id={css.roomPlan} dangerouslySetInnerHTML={{ __html: new XMLSerializer().serializeToString(doc)}}></div>
      <div className={css.bookingButtons}>
        <Button id={css.cancelButton}>CANCEL</Button>
        <Button onclick={bookDesk(selectedDesk)}>BOOK DESK</Button>
      </div>
    </div>
  );

​

我将其作为普通字符串获取，然后将其解析为DOM，然后添加我的eventListeners并将其序列化。但是使用这种方法，象牙不会出现，也不会触发。所以问题是:如何使用string -> DOM -> addedEvents ->渲染svg

Answer 1

只有在react将标记呈现到DOM中之后，才能附加事件处理程序。要实现这一点，您可以查找react ref with callback。

const ref = useCallback(node => {
    if (node !== null) {
      /* do your magic here: node.querySelectorAll('#desk rect') ... */
    }
  }, []);


<div id={css.roomPlan} dangerouslySetInnerHTML={{ __html: svg}} ref={ref}></div>