如何解决ReactJS中null的“addEventListener”TypeError？

问题描述

我正在尝试使用 Google 的模型查看器来加载 3D 模型。它有一个按钮。但我希望该按钮在模型完全加载后可见。所以，我曾经使用过这个 Vanilla JavaScript 代码

<script>
   const modelViewer = document.querySelector("model-viewer");
   const button = document.getElementById("my_ar_button");

   modelViewer.addEventListener("load",function() {
   button.style.display = "block";
   });
</script>

现在我打算在 ReactJS 中使用它，这就是它的样子

const modelViewer = document.querySelector("model-viewer");
const button = document.getElementById("my_ar_button");
    
modelViewer.addEventListener("load",function() {
button.style.display = "block";
});

<model-viewer 
src="https://modelviewer.dev/shared-assets/models/reflective-sphere.gltf"
alt="A 3D model of an astronaut"
ar ar-modes="webxr scene-viewer quick-look"
ar-scale="auto"
quick-look-browsers="safari chrome"
ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
loading="eager"
poster="https://modelviewer.dev/assets/poster-astronaut.png"
autoplay
camera-controls
>
  <button id="my_ar_button" class="my_ar_button" slot="ar-button">Show AR</button>
</model-viewer>

我的 CSS

.my_ar_button {
display: none;
}

我使用脚本标签添加了模型查看器

<Helmet>
 <script
 type="module"
 src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
 async
 >
 </script>
</Helmet>

但它给了我这个错误

TypeError: Cannot read property 'addEventListener' of null

解决方法

您需要在 React 包装器中控制 <model-viewer> 元素。参见react-model-viewer，这是他们的包装器

const useModelLoader = (type,src): ModelData => {
  const loader = useMemo(() => getLoader(type),[type]);

  const [model,setModel] = useState(undefined);
  const [modelCenter,setModelCenter] = useState<THREE.Vector3>(undefined);
  const [error,setError] = useState(undefined);
  const [progress,setProgress] = useState(0);

  useEffect(() => {
    loader.load(
      // resource URL
      src,// called when the resource is loaded
      model => setModel(model),// called while loading is progressing
      ({ loaded,total }) => setProgress((loaded / total) * 100),// called when loading has errors
      error => setError(error)
    );
  },[loader,src]);

  // get the center of the model
  useEffect(() => {
    if (!model) {
      return;
    }

    const box = new THREE.Box3();

    box.setFromObject(model.scene);

    const center = new THREE.Vector3();

    box.getCenter(center);

    setModelCenter(center);
  },[model]);

  return { model,modelCenter,progress,error };
};

第二个 useEffect() 取决于 model，因此您可以对按钮执行相同操作。这将是 modelViewer.addEventListener("load",function() {

的 React 等价物

const [showButton,setShowButton] = useState(false);

useEffect(() => {
  if (model) {                // when model has a value,the loader has completed
    setShowButton(true);      // now show the button
  }
},[model]);

const Button = showButton ? <button...> : null;  // use this to wrap <button>

model-viewer react-hooks reactjs reactjs reactjs reactjs