时间戳

首页 > 解决方案 > QRCodeJs 和反应

javascript - QRCodeJs 和反应

问题描述

我正在使用以下库， qrcodejs

我正在使用 React Frameworks 中的库，并且似乎很挣扎。我收到一条错误消息

无法读取 null 的属性“appendChild”

<div id="qrcode" />孩子

我已经包含了一个产生相同结果的 CodeSandbox 示例。

代码沙盒

感谢您抽出宝贵时间阅读！=]

标签： javascriptreactjs

解决方案

如前所述，您必须为 React 调整代码。在我的方法中，我使用useEffect并createRef抽象了它：https ://codesandbox.io/s/headless-surf-d14of

function App() {
  const qrCodeRef = createRef();

  useEffect(() => {
    new QRCode(qrCodeRef.current, {
      text: "hello",
      width: 166,
      height: 256
    });
  }, []);
  return (
    <Fragment>
      <div ref={qrCodeRef} />
    </Fragment>
  );
}

推荐阅读